EXTJS 左边是树菜单刷新Grid

[chenhuajuan]

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

[未知数]

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

[chenhuajuan]

能不能写一下列子代码呢？ 如： 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;

[葫芦八娃]

希望以下回答能帮上你。 你这个应属于组件之间的数据传输，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":'[e-mail]',"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,{})

[chenhuajuan]

怎没人回的！

[chenhuajuan]

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

[yibey]

搞到最后又是别人帮你写代码了，楼上的如此详细了，楼主还写不出来的话自己检讨吧

[cheng7692019]

[chenhuajuan]

GridPanel的怎样写呢？

[葫芦八娃]

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

[jiang123456yi]

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(); // 每次下拉都会加载数据

	});

点击事件在里面。