extjs的级联展开

最近用extjs写前台，今天上午写了个查询。关于二级目录的展开，贴下代码，便于日后的记忆：

Ext.onReady(init);


function init(){
var workDates;
Ext.define("sccp.fileQuery.mainPanel" ,{ 
   extend: "Ext.Panel",
autoScroll : true,
   border : false,
   layout : "border",  
   initComponent: function() { 
    //--------查询条件；   
    this.busiNo = Ext.create("sand.common.XyComboBox",{
name : "busiOrgNo",
   fieldLabel: "业务机构",
   xy_mustFlag : true,
   queryMode: 'local',
   editable : true,
   xy_storeUrl : "comboBoxCommon/getBusiOrgNo"
})
    this.qsNo = Ext.create("sand.common.XyComboBox",{
name : "busiqsNo",
   fieldLabel: "清算机构",
   queryMode: 'local',
   editable : true,
   xy_storeUrl : "comboBoxCommon/getClearNo"
});
   
    this.fileStyle = Ext.create("sand.common.XyComboBox",{
    name:"fileName",
    fieldLabel:"文件类型",
    editable:true,
    xy_storeUrl:"comboBoxCommon/getFileNo"
    });
   
    this.startSettleDate = Ext.create("sand.common.XyDateField",{
name : "startSettleDate",
fieldLabel : "清算日期",
format : "Y-m-d",
// value : new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1),
labelStyle : "text-align : right",
editable : false
});


    this.dealState = Ext.create("sand.common.XyFixedComboBox",{
    name : "dealState",
    fieldLabel:"处理状态",
    xy_default:"1",
    xy_storeData:[{
"name" : "所有",
"value" : "0"
},{
"name" : "导入成功",
"value" : "1"
}, {
"name" : "导入失败",
"value" : "2"
}],
labelStyle : "text-align : right"
    });
    //---------查询条件结束-------------
    //------按钮---------------------
   
    this.queryBtn = new Ext.Button({
    text:"查询",
    id:"result_queryBtn",
hidden : true ,
    iconCls:"icon-search-form",
    scope:this,
    handler: this.loadStoreData
    });
   
this.exportFileBtn = new Ext.Button(
{
text : "导出",
id : "fileQuery_exportBtn",
hidden : true ,
iconCls : "icon-excel",
scope : this,
handler : function()
{
var startDate= Ext.Date.format(new Date(this.startSettleDate.getValue()),'Ymd');  
this.exportFileBtn.setDisabled(true);
var params = getFormDatas(this.file_query_panel);
formPost(params, "fileResult/fileImportQ");
this.exportFileBtn.setDisabled(false);
}
});

//-----------按钮结束-----------



//form 组装 
this.file_query_panel = Ext.create("sand.ui.panel",{
xy_column : 3,
xy_columnWidth : [.2, .2, .3],
xy_items : [this.busiNo, this.qsNo,this.fileStyle, this.startSettleDate,this.dealState],
xy_buttons : [this.queryBtn, "-", this.exportFileBtn]
});
//----------查询结果显示--------


Ext.define('queryFile11', {
       extend:'Ext.data.Model',
       idProperty : 'rid',      
   fields : ["ClEARORG","CLEARDATE","FILENAME","FILE_STATE","FAIL_REASON","TOTAL_NUM","TOTAL_AMT","FILE_NAME","NEED_FLAG"],
       proxy:{
           type   : 'ajax',
           url    : 'fileResult/showFirst',
           reader : {
               type : 'json',
               root : 'root'
           }
       },
       hasMany    : {
           model : 'queryFile11Detail',
           name  : 'detail'
       }
   });


Ext.define('queryFile11Detail', {
       extend : 'Ext.data.Model',
       idProperty : 'appTotid',
   fields : ["ClEARORG","CLEARDATE","FILENAME","FILE_STATE","FAIL_REASON","TOTAL_NUM","TOTAL_AMT","FILE_NAME","NEED_FLAG"],
       proxy : {
           type   : 'ajax',
           url    : 'fileResult/showFirst',
           reader : {
               type : 'json',
               root : 'root'
           }
       },
       belongsTo : 'queryFile11'
   });




//------------------------------



this.queryFile_grid_cm = [                       
{
text : "清算机构", 
dataIndex : "ClEARORG",
width : 180,
align : "left"
},
     
      {
      text : "清算日期", 
      dataIndex : "CLEARDATE",
      width : 80,
      align : "left"
      },
      {
      text : "文件类型", 
      dataIndex : "FILENAME",
      width : 150,
      align : "left"
      },
      {
      text : "处理状态", 
      dataIndex : "FILE_STATE",
      width : 80,
      align : "left"
      },
      {
      text : "失败原因", 
      dataIndex : "FAIL_REASON",
      width : 120,
      align : "left"
      },
      {
      text : "文件笔数", 
      dataIndex : "TOTAL_NUM",
      width : 60,
      align : "left"
      },
       
      {
      text : "文件金额", 
      dataIndex : "TOTAL_AMT",
      width : 100,
      align : "left"
      },
     
      {
      text : "文件名", 
      dataIndex : "FILE_NAME",
      width : 210,
      align : "left"
      },
      {
      text : "是否必须导入", 
      dataIndex : "NEED_FLAG",
      width : 100,
      align : "left"
      }
      ];

this.queryFile_grid_store = new Ext.data.Store({
       model    : 'queryFile11',
       proxy    : {
           type   : 'ajax',
           url    : 'fileResult/showFirst',
           reader : {
               type : 'json',
               root : 'root'
           }
       }
 });  

var queryFile_grid_plugin = Ext.create("Ux.grid.plugin.AssociationRowExpander",{   
    getterName : 'detail',
    isSubCheckBox: false,
    gridConfig : {
    //width : 1650,
    autoHeight:true,
    autoWidth:true,
    columnLines: true,
    hideHeaders : true,
    autoScroll : true,
    viewConfig: {
    stripeRows: true,
    autoFill :true,
    forceFit:true
    },
    columns : [ 
{
text : "清算机构", 
dataIndex : "ClEARORG",
width : 155,
align : "left"
},

{
text : "清算日期", 
dataIndex : "CLEARDATE",
width : 80,
align : "left"
},
{
text : "文件类型", 
dataIndex : "FILENAME",
width : 150,
align : "left"
},
{
text : "处理状态", 
dataIndex : "FILE_STATE",
width : 80,
align : "left"
},
{
text : "失败原因", 
dataIndex : "FAIL_REASON",
width : 120,
align : "left"
},
{
text : "文件笔数", 
dataIndex : "TOTAL_NUM",
width : 60,
align : "left"
},
 
{
text : "文件金额", 
dataIndex : "TOTAL_AMT",
width : 100,
align : "left"
},

{
text : "文件名", 
dataIndex : "FILE_NAME",
width : 210,
align : "left"
} ,
{
      text : "是否必须导入", 
      dataIndex : "NEED_FLAG",
      renderer : function(v){
      var str = "";
      if(v == "1"){
      str = "是";
      }else if(v == "0"){
      str = "否";
      }
      return str;
      },
      width : 100,
      align : "left"
      }
       ]
    }
   });
 
   var _this = this;

   this.queryFileResult_grid = Ext.create("Ext.grid.GridPanel",{
    title : "查询结果",
autoScroll : true,
border : false,
width: pageWidth,
loadMask : true,
columnLines: true,
anchor : pageFormGridTrans,
store: this.queryFile_grid_store,
columns: this.queryFile_grid_cm,
listeners: {
        expandbody:function(rowNode, record, nextBd){
        var dcbp_audit_grid_grid_jsPayTotal_sub = queryFile_grid_plugin.getInnerCmp(record);
        if(typeof(dcbp_audit_grid_grid_jsPayTotal_sub) != "undefined"){ 
        if(_this.queryFileResult_grid.getSelectionModel().isSelected(record)){
        dcbp_audit_grid_grid_jsPayTotal_sub.getSelectionModel().selectAll();
        }
        }
        }
       },
viewConfig: {
           stripeRows: true
       },
       plugins: [queryFile_grid_plugin],
       tbar : this.barTop
});

   this.queryFileResult_grid.getView().addListener('refresh',function(view){
    for(var i=0;i<view.getStore().count();i++){
    queryFile_grid_plugin.coll(i);
    }
   });

   this.queryFile_grid_store.on("beforeload", this.beforeLoad, this);


//-------------------------


//**********************gridPanel
this.items = [ {  
           region : "north", 
           border : false,
           items : [this.file_query_panel]
       },{  
          region : "center",  
          layout : 'fit',
          border : false,
          autoScroll : true,
          items : [this.queryFileResult_grid]
       }

];
       this.callParent(arguments); 
    // 获取work_date
this.getWorkDate();
   },
   
   beforeLoad : function(){//查询前调用方法，设置params
    var params =  getFormDatas(this.file_query_panel);   
    this.queryFileResult_grid.getStore().getProxy().extraParams = params;
   },
   loadStoreData : function(searchType){//查询加载  
    this.queryFileResult_grid.getStore().load();
   },
       
   getWorkDate : function() {
// request调用共通方法
sandRequest("", "sysSccpCommon/getWorkDate", false, false, "",
this, this.successRequest)
},
successRequest : function(response, _this) {
var strJson = Ext.decode(response.responseText);
var workDate = strJson.msg;
var date = new Date(workDate.substring(0, 4), workDate.substring(4,
6)
- 1, workDate.substring(6, 8));

_this.startSettleDate.setValue(date);
workDates = Ext.Date.format(new Date(_this.startSettleDate.getValue()),'Ymd');
// _this.endSettleDate.setValue(date);
sysWorkDate = workDate;
}
});

function getFormDatas(obj){
    var params = {};
    obj.items.each(function(item,index,length){
    var itemObjs= item.initialConfig.items;
    for(var i=0; i<itemObjs.length; i++){
    var field = itemObjs[i].items[0];
    if(field.xtype == "datefield"){
    params[field.name] = field.getRawValue().replace(/-/g, '');
    }else if(field.xtype == "textfield" || field.xtype == "numberfield" || field.xtype == "combobox"){
    params[field.name] = field.getValue();
    }else if(field.xtype == "fileuploadfield" ){
    params[field.name] = field.getValue();
    }
    }
      });
      return params;
    };
    
var fileResultSearch = Ext.create("sccp.fileQuery.mainPanel",{
title : "文件导入结果查询",
height: pageHeigth,
width: pageWidth,
id:"fileResultSearch",
renderTo : "fileResultSearch"
});
setSandPanelIds(fileResultSearch);
setTimeout(function() {
Ext.get("loading").remove();
Ext.get("loading-mask").fadeOut({remove : true});
}, 50);

// 异步调用 读取权限
setButtonRole();
}

下面是显示的效果：