Extjs三级联动效果(1)

var firstStore = new Ext.data.JsonStore({
    autoLoad : false,
    url : 'getUnderLevelOrgs.action',
    root : 'root',
    totalProperty : 'totalProperty',
    fields : ['id', 'name'],
    baseParams : {
     start : 0,
     limit : 8,
     id : 0,
     level : 1
    }
});

var secondStore = new Ext.data.Store({
   proxy : new Ext.data.HttpProxy({
    url : "getUnderLevelOrgs.action"
   }),
   reader : new Ext.data.JsonReader({
    root : 'root',
    totalProperty : 'totalProperty',
    id : 'id',
    fields : ['id','name']
   })

})


var thirdStore = new Ext.data.JsonStore({
    url : 'getUnderLevelOrgs.action',
    root : 'root',
    totalProperty : 'totalProperty',
    fields : ['id', 'name']
})


var orgForm = new Ext.form.FormPanel({
   title : '维护他人机构',
   frame : true,
   closable : true,
   hideMode : 'offsets',
   //constrainHeader : true,
   labelAlign : 'right',
   items : [{
      fieldLabel : '执法人员',
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'id',
      xtype : 'combo',
      hiddenName : 'userId',
      valueField : 'userId',
      displayField : 'applicationame',
      allowBlank : false,
      blankText : '请选择人员',
      emptyText : '请选择人员',
      triggerAction : 'all',
      mode : 'local',
      store : personStore
     },{
      fieldLabel : '一级单位',
      forceSelection : true,
      autoLoad : false,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'firOrg',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      allowBlank : false,
      blankText : '请选择一级单位',
      emptyText : '请选择一级单位',
      triggerAction : 'all',
      // width : 150,
      mode : 'remote',
      store : firstStore,
      listeners : {
       change :function(node){
        /*secUrl = 'global/globalAction!getUnderLevelOrgs.action';
        secProxy.setUrl(secUrl);*/
        secondStore.load({
         params : {
          start : 0,
          limit : 5,
          level : 2,
          id : node.getValue()
         }
        });

       }
      }
     },{
      fieldLabel : '二级单位',
      autoLoad : false,
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'secOrg',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      blankText : '请选择二级单位',
      emptyText : '请选择二级单位',
      triggerAction : 'all',
      mode : 'local',
      editable : false,
      store : secondStore,
      listeners : {
       change : function(node){
        thirdStore.load({
         params : {
          start : 0,
          limit : 5,
          level : 3,
          id : node.getValue()
         }
        });
       }
      }
     },{
      fieldLabel : '三级单位',
      autoLoad : false,
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'id',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      blankText : '请选择三级单位',
      emptyText : '请选择三级单位',
      triggerAction : 'all',
      // width : 150,
      mode : 'local',
      editable : false,
      store : thirdStore
     }],
     buttons : [{
      text : '更新',
      handler : function(btn){

      }
     }]


});

su.orgManager.win = new Ext.Window({
   title : '机构维护',
   //resizable : false,
   layout : 'fit',
   width : 350,
   closeAction : 'hide',
   height : 220,
   items : [orgForm]
});