既然可以测试本地AJAX，那就把书前面的代码作一次学习吧。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
			Ext.onReady(function(){
        Ext.define('BookInfo', {
          extend: 'Ext.data.Model',
          fields: [{name: 'bookName'}]
        });
        var bookStore = Ext.create('Ext.data.Store', {
          model: 'BookInfo',
          proxy: {
            type: 'ajax',
            url: 'source.html',
            reader: new Ext.data.ArrayReader({model: 'BookInfo'})
          }
        });
        Ext.create('Ext.form.Panel', {
          title: 'Sample',
          frame: true,
          height: 300,
          width: 600,
          renderTo: Ext.getBody(),
          bodyPadding: 5,
          defaults: {
            labelSeparator: ': ',
            labelWidth: 100,
            width: 400,
            labelAlign: 'left'
          },
          items: [{
            xtype: 'combo',
            fieldLabel: '书籍列表',
            listConfig: {
              loadingText: '正在加载书籍信息',
              emptyText: '未找到匹配值',
              maxHeight: 160
            },
            allQuery: 'allbook',
            minChars: 3,
            queryDelay: 300,
            queryParam: 'searchbook',
            tiggerAction: 'all',
            store: bookStore,
            displayField: 'bookName',
            valueField: 'bookName',
            queryMode: 'remote',
          }]
        });

      });
    </script>
</head>
<body>
<div id='tpl-table1'></div>
<br>
<div id='tpl-table2'></div>
</body>
</html>

　　source.html的内容：

[
	['java编程思想'],
	['C++入门'],
	['javascript入门'],
	['python入门'],
	['php程序设计']
]

　　

ExtJs之Ext.comboBox的远程数据源读取程序的更多相关文章

  1. extjs 远程数据源

    1本地数据源组合框 Ext.onReady(function(){ //创建数据模型 Ext.regModel('PostInfo', { fields: [{name: 'province'}, { ...

  2. 【easyui-combobox】下拉菜单自动补全功能，Ajax获取远程数据源

    这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class= ...

  3. Easyui datagrid editor为combobox时指定数据源

    当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存, ...

  4. ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  5. 多个ComboBox绑定同一个数据源出现的问题解决办法

    出现问题: 当多个ComboBox绑定同一个数据源后,只要更改其中一个的选择项时,其它的ComboBox也跟着改变了 解决办法: DataTable dt = new DataTable(); dt ...

  6. 多线程下的 Lambda表达式 异步 WebClient 读取程序图标，来作为托盘 图标 logo ico

    //读取程序图标,来作为托盘图标this.notifyIcon.Icon = System.Drawing.Icon.ExtractAssociatedIcon(System.Windows.Form ...

  7. asp.net项目发布网上-当前自定义错误设置禁止远程查看应用程序

    早上服务器的系统突然出错了,悲剧~ ==============异常信息:============================== 服务器上出现应用程序错误.此应用程序的当前自定义错误设置禁止远程 ...

  8. java远程调试(断点)程序/tomcat( eclipse远程调试Tomcat方法)

    tomcat远程调试: 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_OPTS="-Xdebug  -Xrunjdwp:transport=dt_soc ...

  9. .net 禁止远程查看应用程序错误的详细信息，服务器上出现应用程序错误

    打开页面时出现以下错误   "/"应用程序中的服务器错误. 运行时错误 说明: 服务器上出现应用程序错误.此应用程序的当前自定义错误设置禁止远程查看应用程序错误的详细信息(出于安全 ...

随机推荐

  1. Android中关闭DatePicker、TimePicker、NumberPicker的可编辑模式

    DatePicker.TimePicker.NumberPicker这三个控件在使用的过程中,用户点击数字会弹出键盘,有时候会造成布局被挤压不好看,也有其他的需求. 我看了网上很多文章的解决办法都无效 ...

  2. PHPExcel 使用心得

    最近有个项目需要将数据导出成excel,以前都没接触过.便google一下知道了PHPExcel 这个据说很强大的类库. 写这个博文主要目的等同于做笔记 1首先看了下官方的文档.http://phpe ...

  3. 自己动手丰衣足食，为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  4. 通过DOM实现点击隐藏父元素

    HTML代码简单如下: <ul id='ul1'> <li><a href="javascript:">1</a></li&g ...

  5. 树莓派-USB存储设备自动挂载

    简单介绍实现命令行下USB存储设备自动挂载的方法,Linux gnome/kde窗口环境下有移动存储的管理程序,可以实现自动挂载移动存储设备,但是在命令行下 通常需要用mount命令手动挂载USB存储 ...

  6. amcharts简单demo（仪表盘）

    最近项目中展示数据有用到amcharts,一个小demo例子. <script src="<%=basePath%>amchart/amcharts.js" ty ...

  7. SqlServer 导出指定表数据 生成Insert脚本

    版权声明:本文为博主原创文章,未经博主允许不得转载.

  8. 【Oracle】表连接三种方式

    表连接的方式有三种分别是:排序合并连接(Sort Merge Join).嵌套循环连接(Nested Loops Join).哈希连接(Hash Join). 1. 排序合并连接(Sort Merge ...

  9. vs2015网站部署到iis后运行调试：无法在web服务器上启动调试的问题，403已禁止

    C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files C:\Windows\Microsoft.NET\Frame ...

  10. 用SQL Server验证用户名和密码

    用SQL Server验证用户名和密码,从页面输入的用户名和密码与数据库的用户名和密码进行匹配,正确则登入,错误则提醒. <form action="index.jsp" m ...