ExtJs之Ext.comboBox的远程数据源读取程序

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ExtJs之Ext.comboBox的远程数据源读取程序相关的知识，希望对你有一定的参考价值。

既然可以测试本地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的远程数据源读取程序的主要内容，如果未能解决你的问题，请参考以下文章

Ext comboBox的remote和local的区别

Ext ComboBox 中 如何设置值不可修改，但是依然有下拉框

ExtJs - 基于远程数据的分页和缓冲网格，没有远程分页和过滤

Ext combobox 中选择一个选项然后删除文本框的选项，在失去焦点时为啥刚才选中的选项有恢复了，速求。。

ExtJS4 网格不会更新远程数据库

如何像数组形式远程存储extjs一样返回数据