Ext.js5（自定义的下拉列表模板）（从服务器加载数据）（28）

来源：互联网发布：淘宝联盟规则变更编辑：程序博客网时间：2024/05/02 12:29

view

/** * This example illustrates a combo box which loads the data source from a server * but queries the local result set. It uses a custom item template for the dropdown list. * 这个例子模拟了下拉框从服务器加载数据但是查询本地结果集。使用了自定义的下拉列表模板。 */Ext.define('KitchenSink.view.form.combobox.RemoteLoad', {    extend: 'Ext.form.Panel',    xtype: 'remote-loaded-combo',    title: 'Remote loaded ComboBox',    width: 500,    layout: 'form',    viewModel: {},    items: [{        xtype: 'fieldset',        layout: 'anchor',        items: [{            xtype: 'component',            anchor: '100%',            html: [                '<h3>Remote loaded, local query mode</h3>',                '<p>This ComboBox uses remotely loaded data, to perform querying ',                'client side.</p>',                //适用于数据并非太大或者动态的操控                '<p>This is suitable when the dataset is not too big or dynamic ',                'to be manipulated locally.</p>',                '<p>This example uses a custom template for the dropdown list ',                'to illustrate grouping.</p>'            ]        }, {            xtype: 'displayfield',            fieldLabel: 'Selected State',            bind: '{states.value}'        }, {            xtype: 'combobox',            reference: 'states',            publishes: 'value',            fieldLabel: 'Select State',            displayField: 'state',            anchor: '-15',            store: {                type: 'remote-states',                autoLoad: true            },            minChars: 0,            queryMode: 'local',            tpl: [                '<ul class="x-list-plain">',                    '<tpl for=".">',                        '<li class="',                            Ext.baseCSSPrefix, 'grid-group-hd ',                            Ext.baseCSSPrefix, 'grid-group-title">{abbr}</li>',                        '<li class="x-boundlist-item">',                            '{state}, {description}',                        '</li>',                    '</tpl>',                '</ul>'            ]        }]    }]});

model

Ext.define('KitchenSink.model.State', {    extend: 'KitchenSink.model.Base',    fields: [        'abbr',        'state',        'description',        'country'    ]});

store

Ext.define('KitchenSink.store.RemoteStates', {    extend: 'Ext.data.Store',    alias: 'store.remote-states',    model: 'KitchenSink.model.State',    storeId: 'remote-states',    proxy: {        type: 'ajax',        url: 'resources/data/form/states_remote.php',        reader: {            type: 'array',            rootProperty: 'data'        }    }});

0 0