<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<title></title>
<script type="text/javascript">
//form
var skip_store = new Ext.data.JsonStore({
fields:['id','value'],
data:[{id:'',value:''},{id:'#',value:'#'}]
});
var skip = new Ext.form.ComboBox({
name:'skip',
fieldLabel:'skip',
mode: 'local',
allowBlank : true ,
triggerAction : 'all',
store:skip_store,
displayField: 'value',
width:400
});
//on logic1
var on_logic1_store = new Ext.data.JsonStore({
url:'1220php_database_test.php',
root:'logic1',
fields:['id','name']
});
var on_logic1 = new Ext.form.ComboBox({
name:'on_logic1',
fieldLabel:'on_logic1',
mode: 'remote',
allowBlank : true ,
triggerAction : 'all',
store n_logic1_store,
displayField: 'name',
width:400
});
var form_long = new Ext.FormPanel({
id:'form_long',
title: 'form',
labelWidth: 180,
bodyStyle: 'padding:10px',
//bodyStyle: 'padding:10px',
// renderTo : 'formPanel2',
//coloapasable:'true',
// layout:'fit'
width : 800,
autoScroll : true,
containerScroll : true,
buttonAlign :'center',
items:[skip,on_logic1]
});
//form_short
var form_short = new Ext.FormPanel({
id:'form_short',
title: 'form',
labelWidth: 180,
bodyStyle: 'padding:10px',
//bodyStyle: 'padding:10px',
// renderTo : 'formPanel2',
//coloapasable:'true',
// layout:'fit'
width : 800,
autoScroll : true,
containerScroll : true,
buttonAlign :'center',
items:[skip]
});
//grid
var cm = new Ext.grid.ColumnModel([{header: 'srl', dataIndex: 'srl',width :50},
{header: 'skip', dataIndex: 'skip',width :50},
{header: 'on logic1', dataIndex: 'on_logic1'}
]);
var data = [['5', '','Is_Editor'
],
['10', '','Is_Editor'
]
];
var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},[
{name: 'srl'},
{name: 'skip'},
{name: 'on_logic1'}
])
});
store.load(); // 載入資料
var grid_long = new Ext.grid.GridPanel({
id:'grid_long',
//renderTo: "grid",
store: store,
cm: cm,
//autoScroll : true,
containerScroll : true,
//viewConfig: {
// forceFit: true // 自動調整欄寬[註1],
//},
title: "The Specification Name:",
width:'auto',
stripeRows: true,
loadMask: true,
height: 400
});
//grid_short
var cm = new Ext.grid.ColumnModel([{header: 'srl', dataIndex: 'srl',width :50},
{header: 'skip', dataIndex: 'skip',width :50}
]);
var data = [['5', ''
],
['10', ''
]
];
var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},[
{name: 'srl'},
{name: 'skip'},
])
});
store.load(); // 載入資料
var grid_short = new Ext.grid.GridPanel({
id:'grid_short',
//renderTo: "grid",
store: store,
cm: cm,
//autoScroll : true,
containerScroll : true,
//viewConfig: {
// forceFit: true // 自動調整欄寬[註1],
//},
title: "The Specification Name:",
width:'auto',
stripeRows: true,
loadMask: true,
height: 400
});
Ext.onReady(function() {
var accordion = new Ext.Panel({
region:'center',
id:'accor',
margins:'3 0 3 3',
layout:'accordion',
align : 'center' ,
items: [form_short,grid_short ]
});
var viewport = new Ext.Viewport({
id:'viewport',
layout:'border',
//split:true,
//collapsible: true,
items:[
accordion,tree]
});
});
var root = new Ext.tree.AsyncTreeNode({
text: 'Specification' ,
children:
[{
id: 1,
text: 'Inner',
children: [{id: 'n21',text: 'Array_Process',leaf: true},
{id: 'n22',text: 'Power_Proces',leaf: true},
{id: 'n23',text: 'Signal_Process',leaf: true}
]
},
{
id: 3,
text: 'Drill',
children: [{id: 'y41',text: 'DX_Array',leaf: true},
{id: 'y42',text: 'Drill',leaf: true}
]
},
{
id: 4,
text: 'Netlist',
children: [{id: 'n51',text: 'Process_1014',leaf: true},
{id: 'y52',text: 'DX_1014',leaf: true}
]
}
]
});
var tree = new Ext.tree.TreePanel({
region: 'west',
width: 250,
height:580,
collapsible:true,
split:true,
root: root,
listeners:{
click:{
fn:clickListener
}
}
});
function clickListener(node,event){
if(node.isLeaf()){
//var x = node.id;
if(node.id.charAt(0)=='n'){
Ext.getCmp('accor').items.remove(grid_short);
Ext.getCmp('accor').items.add(grid_long);
Ext.getCmp('accor').doLayout(true) ;
}
else{
Ext.getCmp('accor').items.add(grid_short);
Ext.getCmp('accor').doLayout(true) ;
}
}
}
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>附上程式碼~
在下的布局這樣子的 :
viewport的 items 裡 左邊放tree ，右邊放 panel~
panel的layout為"accordion" ，items 裡 放兩個元素 form及grid~
想要的效果就是點擊左邊樹，右邊的panel能夠隨之變化~~
目前想到的是:
Ext.getCmp('accor').items.remove(grid_short); 找到該panel將該元素從items裡移除~
Ext.getCmp('accor').items.add(grid_long); 在items新增一元素~
Ext.getCmp('accor').doLayout(true) ; 該 panel重載~
可是已經移除的元素，標題還是在上面，這樣新增加一個元素時就變的看起來有三個，但是被移掉的那個是空的，標題還在~
想請問各位大大有什麼辦法可以移掉標題??
在下想作的就只是：點左邊樹的葉子，然後動態加載右邊的panel(從資料庫讀資料) ，想請問有別的方法還是例子可以參考的?
卡了好幾天...挺鬱悶的 ~ ~
小弟~先謝謝各位大大了~ |
發表於 2010-12-22 15:13
|