zoukankan      html  css  js  c++  java
  • EXT 省市三级联动及默认选择

    var provinceStore = Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    proxy: {
                        type: 'ajax',
                        url: '/data/CommonHandlers/ComboBoxHandler.ashx?action=province',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
    
                var cityStore = Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    proxy: {
                        type: 'ajax',
                        url: '/data/CommonHandlers/ComboBoxHandler.ashx',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
    
                var districtStore = Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    proxy: {
                        type: 'ajax',
                        url: '/data/CommonHandlers/ComboBoxHandler.ashx',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
    
    
    
    
    {    
                                fieldLabel: '所属地区',
                                labelWidth: 60,
                                xtype: 'fieldcontainer',
                                combineErrors: true,
                                defaultType: 'textfield',
                                defaults: {
                                    hideLabel: 'true'
                                },
                                layout: 'hbox',
                                flex: 1,
                                items: [{
                                    emptyText: '请选择省份...',
                                    flex: 3,
                                    xtype: 'combobox',
                                    name: 'Provinces',
                                    id: 'Provinces',
                                    hiddenName: 'name',
                                    store: provinceStore,
                                    selectOnFocus: true,
                                    valueField: 'id',
                                    displayField: 'name',
                                    queryMode: 'remote',
                                    editable: false,
                                    listeners: {
                                        select: function (Combox, record, index) {//联动效果
                                            Ext.getCmp('Provinces_id').setValue(this.value);
                                            var city = Ext.getCmp('City');
                                            city.clearValue();
                                            city.store.removeAll();
                                            cityStore.load({
                                                params: {
                                                    action: 'city', parentid: this.value
                                                }
                                            });
                                        }
                                    }
                                }, {
                                    emptyText: '请选择城市...',
                                    flex: 3,
                                    editable: false,
                                    selectOnFocus: true,
                                    xtype: 'combobox',
                                    id: 'City',
                                    name: 'City',
                                    margins: '0 0 0 6',
                                    valueField: 'id',
                                    displayField: 'name',
                                    store: cityStore,
                                    queryMode: 'local',
                                    listeners: {
                                        select: function (Combox, record, index) {//联动效果
                                            Ext.getCmp('City_id').setValue(this.value);
                                            var district = Ext.getCmp('District');
                                            district.clearValue();
                                            district.store.removeAll();
                                            districtStore.load({
                                                params: {
                                                    action: 'city', parentid: this.value
                                                }
                                            });
                                        }
                                    }
                                }, {
                                    emptyText: '请选择地区...',
                                    flex: 3,
                                    editable: false,
                                    selectOnFocus: true,
                                    xtype: 'combobox',
                                    id: 'District',
                                    name: 'District',
                                    margins: '0 0 0 6',
                                    valueField: 'id',
                                    displayField: 'name',
                                    store: districtStore,
                                    queryMode: 'local',
                                    listeners: {
                                        select: function (Combox, record, index) {//联动效果
                                            Ext.getCmp('District_id').setValue(this.value);
                                        }
                                    }
                                }]
                            }
    
    
                    默认选择
                    provinceStore.load();
                    provinceStore.on("load", function () {
                        Ext.getCmp('Provinces').select(provinceStore.getAt(9));//江苏省
                    }, provinceStore, true);
                    cityStore.load({
                        params: {
                            action: 'city', parentid: 10
                        }
                    });
                    cityStore.on("load", function () {
                        Ext.getCmp('City').select(cityStore.getAt(2));//徐州市
                    }, cityStore, true);
                    districtStore.load({
                        params: {
                            action: 'city', parentid: 110//区县
                        }
                    });
  • 相关阅读:
    usage of tmux docker
    mac. mysql
    使用ssh远程编辑
    systemd-udevadm
    iperf
    brctl
    NAT
    Linux 网络配置
    Linux 命令行快捷键
    sed 参数分析
  • 原文地址:https://www.cnblogs.com/Celebrator/p/4726232.html
Copyright © 2011-2022 走看看