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

本文介绍了一个使用ExtJS框架创建的远程加载数据但本地查询的组合框组件示例。该组件从服务器获取数据,并使用自定义模板显示下拉列表,支持按州名筛选。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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'
        }
    }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值