EXTJS 左边是树菜单刷新Grid

Question

EXTJS 左边是树菜单，点击节点的时候，在右边的Grid显示相应的数据，就是根据节点ID刷新数据，这样的事件怎写呢？

Answer 1

非ajax方式：
节点点击事件中把id写到一个隐藏的表单元素中，提交表单，服务端获根据id查询数据
ajax方式：
节点点击事件中ajax请求，把id发送到服务端，服务端接收到请求，将查询结果返回到客户端，客户端在回调函数中获得查询结果，更新grid数据源

Answer 2

能不能写一下列子代码呢？
如：
children:[{
text:'jsp',
iconCls:'user',
leaf:true,
listeners: {
'click' : function (node, e) {
//这里面怎写呢？
}}
}]  然后把取得的节点传到后台
 public Page pagedQuery(int pageNo, int pageSize,int deptno) throws Exception {
    
        String sql = "SELECT top("+pageSize+") * FROM student  WHERE id NOT IN (SELECT TOP("+pageNo+") id FROM student  ) where deptno="+ deptno; 

Answer 3

希望以下回答能帮上你。
你这个应属于组件之间的数据传输，ExtJS的Store组件可以将其统一处理，如果你的grid表格里没有特殊的服务器请求（如果有，最好别写在tree的点击事件里，直接在Grid组件里写,减少对FWQ的直接请求数量），所以,树的点击事件可以不需要做成ajax请求。
我的想法是 1.将你所点击的节点的record传给Grid组件，2.让Grid的Store组件进行重新加载,3.在Grid渲染后执行加载事件。
以下是TreePanel点击事件，代码是我从自己项目中剪切下来的，给你做参考。重点在点击的时候，能够将节点record数据获取到.
注意：你的record里面不要直接用id作为键,否则可能会报个ext底层错误.this.contextTree = new Ext.tree.TreePanel( {
autoScroll : true,
border : false,
width : 200,
dataUrl : 'viewClientTreeData.action',
root : {
text : 'Client',
leaf : false
},
listeners : {
scope: this,
click : function(node) {
var jsonObj = this.treeNodeDataConfig(node.attributes);//对要传输的数据进行了重新处理，将要显示在Grid里的数据重新组装成JS Object,用
Ext.util.JSON.decode(jsonObj)方法转化(如果数据结构报错就用，不报错可以不用);

// 处理后的数据结构 var jsonObj = {"client_name":"ckk","email":'[email protected]',"age":12,"website":"www.ckk.com","level":1};
if (node.attributes.leaf != false) {
Ext.getCmp('_context_form_pane').add(new javascript.main.editGrid(jsonObj).show());
}
}
},
没有直接用GridPanel来写，以下是一段DataView组件代码，同样只供参考,树点击事件传过来的对象就是 data,如果硬是要一个GridPanel的，你继续追问，我待会写个。javascript.main.editGrid = function(data){
this.store = new Ext.data.JsonStore({
fields: [
           {name: 'client_name'},
           {name: 'age'},
           {name: 'email'},
           {name: 'level'},
           {name: 'website'}
        ],
        data: data
}) this.tpl = new Ext.XTemplate(
 '<table>',

'<tr >',
'<td class="client-treetpl-tdText">姓名:</td>',
'<td class="client-treetpl-tdValue">{client_name}</td>',
'<td class="client-treetpl-tdText" style="margin-left:5%;">年龄:</td>',
'<td class="client-treetpl-tdValue">{age}</td>'
'</table>')
javascript.main.editGrid.superclass.constructor.call(this,{
title:data.client_name+'_'+data.c_id,
width:600,
closable:true,
height:300,
tpl:this.tpl,
id:'_'+data.c_id,
listeners:{
scope:this,
afterrender:function(){
//alert(Ext.util.JSON.encode(data))
this.tpl.append(this.getEl(),data);
}
}
})
}
Ext.extend(javascript.main.editGrid,Ext.DataView,{})

Answer 4

能不能在我的代码里帮我改一下呢？谢谢啦，代码在：http://qq2590307950.iteye.com/admin/blogs/1814800

Answer 5

把对象继承关系改成GridPanel，删除tpl组件.grid的代码如何写，你可以去看看extjs包\example\grid下面的例子，很多。

Answer 6

var root = new Ext.tree.AsyncTreeNode( {
text : root_deptname,
expanded : true,
id : root_deptid
});
var deptTree = new Ext.tree.TreePanel( {
loader : new Ext.tree.TreeLoader( {
baseAttrs : {},
dataUrl : 'stockssalesrecord.ered?reqCode=departmentTreeInit'
}),
root : root,
autoScroll : true,
animate : false,
useArrows : false,
border : false
});
// 监听下拉树的节点单击事件
deptTree.on('click', function(node) {
comboxWithTree.setValue(node.text);
Ext.getCmp("id_deptid").setValue(node.id);
comboxWithTree.collapse();
});
var comboxWithTree = new Ext.form.ComboBox(
{
id : 'id_deptname1',
hiddenname : 'deptid',
store : new Ext.data.SimpleStore({
fields : [],
data : [ [] ]
}),
editable : false,
value : ' ',
emptyText : '请选择...',
fieldLabel : '选择部门',
anchor : '100%',
mode : 'local',
triggerAction : 'all',
// labelStyle : micolor,
maxHeight : 390,
// 下拉框的显示模板,addDeptTreeDiv作为显示下拉树的容器
tpl : "<tpl for='.'><div style='height:390px'><div id='deptTreeDiv'></div></div></tpl>",
allowBlank : false,
onSelect : Ext.emptyFn
});
comboxWithTree.on('expand', function() {
// 将UI树挂到treeDiv容器
deptTree.render('deptTreeDiv');
deptTree.root.expand(); //只是第一次下拉会加载数据
// deptTree.root.reload(); // 每次下拉都会加载数据 });
点击事件在里面。