zoukankan      html  css  js  c++  java
  • extjs 省市县级联

    Ext.define('State', {
            extend: 'Ext.data.Model',
            fields: [
                {type: 'string', name: 'nevalue'},
                {type: 'string', name: 'contents'}
            ]
        });
    
        var sheng = Ext.create('Ext.data.Store', {
            model: 'State',
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'POST'
                },
                url: h.url + '/t/101',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });
    
        var shi = Ext.create('Ext.data.Store', {
            model: 'State',
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'POST'
                },
                url: h.url + '/t/102',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: false
        });
    
        var xian = Ext.create('Ext.data.Store', {
            model: 'State',
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'POST'
                },
                url: h.url + '/t/103',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: false
        });
    
    
        Ext.create("Ext.panel.Panel", {
            renderTo: document.body,
             290,
            height: 220,
            title: "城市三级联动",
            plain: true,
            margin: '30 10 0 80',
            bodyStyle: "padding: 45px 15px 15px 15px;",
            defaults: {
                autoScroll: true,
                bodyPadding: 10
            },
            items: [{
                xtype: "combo",
                name: 'sheng',
                id: 'sheng',
                fieldLabel: '选择省',
                displayField: 'contents',
                valueField: 'nevalue',
                store: sheng,
                triggerAction: 'all',
                queryMode: 'local',
                minChars: 1 ,
                editable: false,
                emptyText: '',
                blankText: '',
                listeners: {
                    select: function (combo, record, index) {
                        try {
                            var parent = Ext.getCmp('shi');
                            var parent1 = Ext.getCmp("qu");
                            parent.clearValue();
                            parent1.clearValue();
                            parent.store.load({params: {id: this.value}});
                        }
                        catch (ex) {
                            Ext.MessageBox.alert("错误", "数据加载失败。");
                        }
                    }
                }
            },
                {
                    xtype: "combo",
                    name: 'shi',
                    id: 'shi',
                    fieldLabel: '选择市',
                    displayField: 'contents',
                    valueField: 'nevalue',
                    store: shi,
                    triggerAction: 'all',
                    queryMode: 'local',
                    minChars: 1 ,
                    editable: false,
                    emptyText: '',
                    blankText: '',
                    listeners: {
                        select: function (combo, record, index) {
                            try {
                                var parent = Ext.getCmp("qu");
                                parent.clearValue();
                                parent.store.load({params: {id: this.value}});
                            }
                            catch (ex) {
                                Ext.MessageBox.alert("错误", "数据加载失败。");
                            }
                        }
                    }
                },
                {
                    xtype: "combo",
                    name: 'qu',
                    id: 'qu',
                    fieldLabel: '选择区',
                    displayField: 'contents',
                    valueField: 'nevalue',
                    store: xian,
                    triggerAction: 'all',
                    queryMode: 'local',
                    minChars: 1 ,
                    editable: false,
                    emptyText: '',
                    blankText: ''
                }
            ]
        })

  • 相关阅读:
    快速删除段落间多余的空行
    平时一些mysql小技巧及常识
    mysql中常用的控制流函数
    按年、季度、月分组&&计算日期和时间的函数
    Excel通过身份证获取出生年月,性别,年龄,生肖,星座,省份等信息总结归纳
    统计图表类型选择应用总结&表数据挖掘方法及应用
    EXCEL如何提取文字中包含的数字?
    一篇说尽Excel常见函数用法
    RStudio中,出现中文乱码问题的解决方案
    R-RMySQL包介绍学习
  • 原文地址:https://www.cnblogs.com/lishupeng/p/10473730.html
Copyright © 2011-2022 走看看