Ext.js5下拉单选框—查询远程数据(27)

view

/**
 * This example illustrates a combo box which querys a remote data source.
 * 这个例子用来模拟下拉框查找远程数据资源
 */
Ext.define('KitchenSink.view.form.combobox.RemoteQuery', {
    extend: 'Ext.form.Panel',
    xtype: 'remote-combo',


    title: 'Remote Query ComboBox',
    width: 500,
    layout: 'form',
    viewModel: {},

    items: [{
        xtype: 'fieldset',
        layout: 'anchor',
        items: [{
            xtype: 'component',
            anchor: '100%',
            html: [
                '<h3>Remote query mode</h3>',
                '<p>This ComboBox uses <code>queryMode: "remote"</code> ',
                'to perform the query on a remote API which returns states ',
                'that match the typed string.</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'
            },

            // We're forcing the query to run every time by setting minChars to 0 设置minchars为0可以让查询运行
            // (default is 4)
            minChars: 0,
            //store传递键入字符串使用的参数名，当ComboBox配置queryMode: 'remote'时。 如果显示设置为falsy值不会被发送,默认值：Defaults to: "query"
            queryParam: 'q',
            queryMode: 'remote'
        }]
    }]
});

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'
        }
    }
});