Extjs4 二级联动下拉框

问答首页 → Web前端技术

0 0

Extjs4 二级联动下拉框0

我想做一个二级联动下拉框，但是firebug报错!

后台数据为：system/majorAndClass?departmentId=2

后台数据为：system/department!quryAllDepartments

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'js/ux');

Ext.require([
    //'Ext.form.*',
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    '*',
    'Ext.ux.DataTip'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
	// 性别store
	var sexStrore = Ext.create('Ext.data.Store', {
	    fields: ['sex','id'],
	    data : [{"sex":"男", "id":"0"},
	            {"sex":"女", "id":"1"}]
	        });
	//公用model
	Ext.define('model',{extend:'Ext.data.Model',
					    fields:[{name:'id',mapping:'id',type:'int'},
					            {name:'name',mapping:'name',type:'string'}]}
			  );
	//加载部门的数据
	var departmentStore = Ext.create('Ext.data.Store',{
			model:'model',
			proxy:{
				type:'ajax',
				url:'system/department!quryAllDepartments',
				reader:{
					type:'json',
					root:'departments'
				}
			},
			autoLoad:true,
		    remoteSort:true						
		}
	);
	//加载专业的数据
	var majorStore = Ext.create('Ext.data.Store',{
				model:'model',
				proxy:{
					type:'ajax',
					url: "system/majorAndClass", 
					reader:{
						type:'json',
						root:'majorAndClasses'
					}
				},
				autoLoad: false,
			    remoteSort:true						
			}
	);
    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'register',
        url: 'save-form.php',
        frame: true,
        title: '用户注册',
        bodyPadding: '5 5 0',
        width: '500',
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75,
            allowBlank: false
        },
        plugins: {
            ptype: 'datatip'
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: '账号',
            afterLabelTextTpl: required,
            name: 'number',
            
            tooltip: '输入你的账号！',
            emptyText:'学号或者工号'
        },{
            fieldLabel: '姓名',
            afterLabelTextTpl: required,
            name: 'name',
            tooltip: '请输入你的姓名！'
        },{
            fieldLabel: '密码',
            name: 'password',
            afterLabelTextTpl: required,
            tooltip: "请输入密码"
        }, {
            fieldLabel: 'Email',
            name: 'email',
            allowBlank: false,
            vtype:'email',
            tooltip: '请输入你的邮箱地址'
        }, {
            fieldLabel: '性别',
            name: 'sex',
            xtype: 'combo',
            store: sexStrore,
            queryMode: 'local',
		    displayField: 'sex',
		    valueField: 'id',
            tooltip: '请选择性别！'
        }, {
            fieldLabel: '出生日期',
            name: 'birthday',
            xtype: 'datefield',
            tooltip: '输入出生日期'
        }, {
            fieldLabel: '联系电话',
            name: 'phone',
            tooltip: '请输入你的电话！'
        },{
            fieldLabel: '地址',
            name: 'address',
            tooltip: '请输入你的地址！'
        },{
    	    xtype:"combo", 
    	    width : 200,  
	        fieldLabel : "院系部门",  
	        name : "department",  
	        id: "departmentId",  
	        editable: false,  
	        allowBlank: false,
    	    displayField:'name',
    	    valueField:'id',
    	    store:departmentStore,
    	    triggerAction:'all',
    	    queryMode:'local',
    	    selecOnFocus:true,
    	    forceSelection:true,
    	    allowBlank:false,
    	    editable:true,
    	    listConfig : {loadingText : '正在加载类型信息', emptyText: "请选择院系部门", blankText:'请选择院系部门', maxHeight : 100},
    	    listeners:{
    		   select:function(combo,record,index){
    			   try{
    				   var m = Ext.getCmp('majorAndClass');
	    			   m.clearValue();
	    			   m.store.load(
	    					{params:{departmentId:combo.getValue()}}   
	    			             );
    			   }catch(ex){
    				   alert("数据加载失败！");
    			   }
    		   }
    	   }
       },{
    	   xtype:"combo",
    	   fieldLabel : "专业班级",  
           name : "majorAndClass",  
           id: "majorAndClass",  
    	   fieldLabel:'选择专业班级',
    	   displayField:'name',
    	   valueField:'id',
    	   store:majorStore,
    	   triggerAction:'all',
    	   queryMode:'local',
    	   emptyText:'请选择院系部门',
    	   blankText:'请选择院系部门'
    	  
       }],

        buttons: [{
            text: 'Save',
            handler: function() {
                this.up('form').getForm().isValid();
            }
        },{
            text: 'Cancel',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });

    simple.render(document.getElementById("register"));


    
});

为什么会出错呢》？该怎样解决？

问题补充：谢谢大家关注，今天我再次运行时就正确啦！不知是咋回事？MyEclipse？ExtJS4？反正是能运行啦！

Extjs4