[code="java"]
//公共变量-----------------------------------------------------------------
var tree;
var panels;
var url;
[/code]
[code="java"]
//建立一棵树---------------------------------------------------------------
function createTree(){
var root = new Ext.tree.AsyncTreeNode({
id:'0',
text:'部门'
});
tree = new Ext.tree.TreePanel({
loader:new Ext.tree.TreeLoader({dataUrl:'/KJ222Demo/department/getTrees'}),
root:root,
autoScroll:true,
border:false,
rootVisible:false
});
tree.on('beforeload',function(node){
tree.loader.dataUrl = '/KJ222Demo/department/getTrees?parentId='+node.id;
});
tree.on('click',function(node){
//alert('点击的这个部门的id是：'+node.id);
//openTab(node.id);
node.expand();
node.select();
});
root.expand();
root.select();
}
[/code]
[code="java"]
//搜索部门---------------------------------------------------------------
function searchTree(){
var name = Ext.getCmp('txt-name').getValue();
Ext.Ajax.request({
url:'/KJ222Demo/department/findNode',
params:{
name:name
},
success:function(response){
var data = Ext.util.JSON.decode(response.responseText);
if (data.success) {
tree.root.reload();
tree.selectPath(data.path,null,function(succ,lastNode){
lastNode.expand();
});
} else {
Ext.Msg.alert('提示','没有相关的部门信息！');
}
}
})
}
[/code]
[code="java"]
//页面加载时执行的操作-------------------------------------------------
Ext.onReady(function(){
createTree();
jindu();
createPanel();
alert(panels)
createLayout();
});
[/code]
[code="java"]
//布局管理--------------------------------------------------------------
function createLayout(){
new Ext.Viewport({
layout:'border',
items:[{
title: '部门管理',
collapsible: true,
region:'west',
width: 100,
items:tree,
tbar:[{
id:'txt-name',
xtype:'textfield'
},{
xtype:'button',
text:'查找',
handler:searchTree
}]
},{
region:'center',
id:'panel',
xtype:'panel',
//activeTab:0,
layout:'fit',
contentEl:'dms-content',
items:panels
}]
})
}
[/code]
[code="java"]
//搭建一个右面的面板，里面包含了一个grid-------------------------------------
function createPanel(){
grid = new Ext.grid.GridPanel({
height:400,
store:ds,
columns:[
{header:'行号',renderer:function(value, cellmeta, record, rowIndex){return rowIndex + 1;}},
{header:'编号',dataIndex:'code',width:100},
{header:'名称',dataIndex:'name',width:100},
{header:'其它',dataIndex:'other',width:100}
],
tbar:[{
text:'增加'
//iconCls:'tool-add'
},'-',{
text:'修改',
iconCls:'tool-edit',
// iconCls:'tool-edit',
handler:function(){
edit(grid);
}
},'-',{
text:'删除'
//iconCls:'tool-cut'
// iconCls:'tool-cut',
// handler:this.destroyItem.createDelegate(this)
},'-',{
text:'查询'
//iconCls:'tool-find',
//handler:this.showQueryWindow.createDelegate(this)
},'-',{
text:'导出到excel'
//iconCls:'tool-find',
//handler:this.onPrint.createDelegate(this)
}],
bbar:new Ext.PagingToolbar({
store:ds,
pageSize:20
}),
border:false
});
panels = new Ext.Panel({
border: false,
layout:'fit',
items: grid
});
}
[/code]
[code="java"]
//定义的数据源--------------------------------------------------------------------------
var ds = new Ext.data.JsonStore({
url:'/KJ222Demo/Demo/getAll', //由etmvc映射到DeviceController类中的getDevices方法
fields:[
'id','code','name','other'
],
baseParams:{
limit:20
},
totalProperty:'total',
root:'demo'
});
ds.load({
params:{start:0}
});
[/code]
---------------------------------------------问题---------------------------------------------------
初始化时会显示一个列表
当我点击一个树的节点的时候，panel里的grid内容跟着变（根据这个节点查询出来的）
请问谁知道怎么做？
[b]问题补充：[/b]
希望能针对上面的代码给个具体的解决方案
1.添加一个搜索方法
2.在grid = new Ext.grid.GridPanel({这一行下面添加id:'SearchGrid',
3.在tree.on('click',function(node){这一行下面添加searchFn('1001','管理员');这里的参数可以随便的修改，只作一个参考。
[code="java"]
// 搜索方法
function searchFn(num, name) {
// 获取Grid
var grid = Ext.getCmp("SearchGrid");
if(grid == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到列表控件！',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 获取Grid中的数据存储
var store = grid.store;
if(store == null) {
Ext.MessageBox.show({
title: '提示信息',
msg: '找不到数据适配器！',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
// 把数据加载到数据存储中
store.load({
// 传一些搜索参数
params:{
start: 0,
limit: 20,
number: num,
name: name
}
});
// 把参数保存到数据存储中(把上面除了start和limit不复制之外，把全部复制下来就可以了)
store.on('beforeload',function() {
Ext.apply(
this.baseParams,
{
number: num,
name: name
});
});
}
[/code]
左边teee, 右边tabpanel
伪代码
[code="js"]
var tree,tabpanel,tab;
tree = new Ext.tree.TreePanel({
//....
listeners:{
'click':function(node){
tab = tabpanel.getComponent(node.id);
if(!tab){
tabpanel.add({
store:new Ext.data....,
xtype:'grid',
///
});
}
}
}
});[/code]
具体可以参考官网示例,比如帮助文档那个就是这样的例子.还有很多