奥客

2013-08-01 22:56

写了哈extjs当中的combox,第一次写,照着网上的例子抄.在上次的例子中,是实现了,可是有一个重大的错误.也就是自己根本没有理解combox从远程服务器获取数据，和本地获取数据有什么不同...所以上次的例子中,运行起来好久得不到数据...

本地获取数据:

Ext.onReady(function () {   
            var store = new Ext.data.Store({   
                proxy: new Ext.data.HttpProxy({ url: "./Admin/Data/ComBoxData.ashx" }),   
                reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "result", fields: [{ name: 'Id' }, { name: 'Text'}] })   
            });   
                    
            store.load();   
            var cb = new Ext.form.ComboBox({   
                id: "cbText",   
                store: store,   
                loadingText: 'loading...',   
                emptyText: "--请选择--",   
                triggerAction: "all",//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项   
                mode: "local",   
                valueField: "Id",   
                displayField: "Text",   
                selectOnFocus: true,   
                resizable: true,//可以改变大小   
                typeAhead: true, //延时查询   
                typeAheadDelay:3000,   
                editable: true,//可以编辑   
                renderTo: document.body   
            });   
        });

在上述代码中,mode:"local",这个过程就是..先从服务器端获取json数据保存到store对象中,然后再加载到comboBox当中...

第二种远程获取数据:

Ext.onReady(function () {   
    var store = new Ext.data.Store({   
        proxy: new Ext.data.HttpProxy({ url: "./Admin/Data/ComBoxData.ashx" }),   
        reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "result", fields: [{ name: 'Id' }, { name: 'Text'}] })   
           
    });   
           
    Ext.data.Record.create([   
    { name: 'Id', mapping: 'Id' },   
    { name: 'Text', mapping: 'Text' }   
    ]);   
           
    var cb = new Ext.form.ComboBox({   
        id: "cbText",   
        store: store,   
        loadingText: 'loading...',   
        emptyText: "--请选择--",   
        triggerAction: "all", //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项   
        mode: "remote",   
        valueField: "Id",   
        displayField: "Text",   
        selectOnFocus: true,   
        resizable: true, //可以改变大小   
        //typeAhead: true, //延时查询   
        //typeAheadDelay:3000,   
        editable: true, //可以编辑   
        renderTo: document.body   
    });   
});

这时候，我们要一定要理解ext.data中的record对象和store对象,API中翻译的描述:Store类封装了一个客户端的Record对象的缓存.而load事件是当一笔新的Record加载完毕后触发。Record类不但封装了Record的相关定义信息，还封装了Ext.data.Store里面所使用的Recrod对象的值信息，并且方便任何透过Ext.data.Store来访问Records缓存之信息的代码。（可选的）如果使用的是Ext.data.Reader，这是一个Reader能够获取数据对象的数组值创建到Record对象下面的对应的映射项；如果使用的是Ext.data.JsonReader，那么这是一个javascript表达式的字符串，能够获取数据的引用到Record对象的下面；

个人理解..

奥客

公告

Extjs combox的详解

Extjs combox的详解