EXTJS 左边是树菜单刷新Grid

chenhuajuan 2013-02-21 03:11:09
EXTJS 左边是树菜单,点击节点的时候,在右边的Grid显示相应的数据,就是根据节点ID刷新数据,这样的事件怎写呢?
...全文
647 10 点赞 打赏 收藏 举报
写回复
10 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
jiang123456yi 2013-03-25

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

	});
点击事件在里面。
  • 打赏
  • 举报
回复
葫芦八娃 2013-03-24
把对象继承关系改成GridPanel,删除tpl组件.grid的代码如何写,你可以去看看extjs包\example\grid下面的例子,很多。
  • 打赏
  • 举报
回复
chenhuajuan 2013-03-01
GridPanel的怎样写呢?
  • 打赏
  • 举报
回复
cheng7692019 2013-02-25
  • 打赏
  • 举报
回复
yibey 2013-02-25
搞到最后又是别人帮你写代码了,楼上的如此详细了,楼主还写不出来的话自己检讨吧
  • 打赏
  • 举报
回复
chenhuajuan 2013-02-25
能不能在我的代码里帮我改一下呢?谢谢啦,代码在:http://qq2590307950.iteye.com/admin/blogs/1814800
  • 打赏
  • 举报
回复
chenhuajuan 2013-02-24
怎没人回的!
  • 打赏
  • 举报
回复
葫芦八娃 2013-02-24
希望以下回答能帮上你。 你这个应属于组件之间的数据传输,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":'ckk_abc@sina.com',"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 2013-02-21
能不能写一下列子代码呢? 如: 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;
  • 打赏
  • 举报
回复
未知数 2013-02-21
非ajax方式: 节点点击事件中把id写到一个隐藏的表单元素中,提交表单,服务端获根据id查询数据 ajax方式: 节点点击事件中ajax请求,把id发送到服务端,服务端接收到请求,将查询结果返回到客户端,客户端在回调函数中获得查询结果,更新grid数据源
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-02-21 03:11
社区公告
暂无公告