ExtJS 4 构建一个视图模式比较固定,这里说说TreePanel 参数问题,除了静态的树,动态树一般都会涉及到根节点传回后台,获取子目录。
1.创建model// model
Ext.define('Testtree',{
extend:'Ext.data.Model',
fields:[
{name:'id',type:'string'},
{name:'text',type:'string'},
{name:'isLeaf',type:'boolean'},
{name:'path',type:'path'}
]
});
// store
Ext.define('TreeStore',{
extend:'Ext.data.TreeStore',
model:'Testtree',
autoLoad: false,
folderSort: true,
proxy : {
type:'ajax',
actionMethods: 'post',
url:'./xxx/xxx.action',
reader: {
type: "json",
root: 'data'
},
extraParams:{
root:''
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
//Treepanl 片段
xtype:'treepanel',
id:'testTree',
name:'itest',
title: '请选择',
width: 600,
height: 80,
scroll :'vertical',
rootVisible :false,
store:testStroe,
rootVisible: false,
listeners: {
//树列表单击,取值赋值给id:xxxx的文本框
itemclick: function(view,record,item,index,e,eOpts) {
var str = record.data.path;
var fieldChange = Ext.getCmp('xxxx');
fieldChange.setRawValue(str);
},
//点击目录树+前 给root参数赋值
beforeitemexpand:function(record,eOpts){
var tp = Ext.getCmp('testTree');
var root = tp.getStore().getProxy();
root.extraParams.root = record.data.path;
}
}