有人会extjs的吗？麻烦帮我看一下
这是一个用extjs布局的js代码，主要是一个框架页面，想在左边显示一棵树，树的内容是从数据库动态读出来的，点击树的节点，在右边框架页里显示相应的内容。 先在框架页面通过下面的代码实现了，问题就是怎么把树显示在左边啊？？？？我是做。net开发的
<script type="text/javascript">
var tabpanel;
var index = 0;
var currentItem;
function loadFrames() {
var westPanel = new Ext.Panel({
title: '菜单',
region: 'west',
split: false,
collapsible: true,
collapseMode: 'mini',
width: 200,
html: '<input type=\'button\' value=\'添加新标签页\' id=\'AddNewTab\' onclick=\'addTab(1,"Hello","hi");\'/>'
});
tabpanel = new Ext.TabPanel({
region: 'center',
activeTab: 0,
enableTablScroll: true,
listeners: {
"contextmenu": function(tdemo, myitem, e) {
menu = new Ext.menu.Menu([
{ id: myitem.id + '-close', text: "关闭当前页", handler: function() { tdemo.remove(myitem); } },
{ id: myitem.id + '-close-others', text: "关闭其它页", handler: function() { tdemo.items.each(function(item) { if (item.closable && item != myitem) { tdemo.remove(item); } else { } }); } }]);
var ctxItem = item;
var items = menu.items;
if (tdemo.items.length > 1) {
items.get(myitem.id + '-close').setDisabled(item.closable);
}
else {
items.get(myitem.id + '-close').setDisabled(!item.closable);
var disableOthers = true;
tdemo.items.each(function() {
if (this != item && this.closable) {
disableOthers = true;
return false;
}
});
items.get(myitem.id + '-close-others').setDisabled(disableOthers);
}
menu.showAt(e.getPoint());
}
},
items: [
{ id: '0', title: '百度一下，你就知道', html: '<iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0"></iframe>', closable: true },
{ id: '1', title: '迅雷', html: '<iframe src="http://www.xunlei.com" width="100%" height="100%" frameborder="0"></iframe>', closable: true },
{ id: '2', title: '腾讯网', html: '<iframe src="http://www.qq.com" width="100%" height="100%" frameborder="0"></iframe>', closable: true }
]
});
var southRegion = {
region: 'south',
xtype: 'panel',
split: false,
height: 30,
collapsible: true,
bbar: [new Ext.Toolbar.TextItem(' '), { xtype: "tbfill" }, new Ext.Toolbar.TextItem(''), { xtype: 'tbseparator' }, new Ext.Toolbar.TextItem(''), { pressed: false, text: '', iconCls: 'tabs'}]
};
var northRegion = {
region: 'north',
xtype: 'panel',
height: 60
};
var viewport = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: 'border',
items: [westPanel, tabpanel, southRegion, northRegion]
});
}
function addTab(id, titleName, url) {
tabpanel.add({
title: "" + titleName + "",
id: "" + titleName + "" + index,
html: "<iframe src='http://www.baidu.com' width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>",
closable: true
});
tabpanel.setActiveTab("" + titleName + "" + index);
index++;
}
// Ext.Ajax.request({
//
// url: 'Test.aspx',
// params: {action: 'getDate' },
// method: 'GET',
// success: function(result, request) {
// Ext.MessageBox.alert('Success', 'Data return from the server: ' + result.responseText);
// },
// failure: function(result, request) {
// Ext.MessageBox.alert('Failed', 'Successfully posted form: ' + action.date);
// } });
loadFrames();
</script>
[解决办法]
树可以放在单独一个html中，
你这已经分了west和center 也就是用了border布局，
west中的items:[tree]可以直接是树 也可以是一个html
items:[
html:'<iframe src="\\..\\tree.html"></iframe>'
]
[解决办法]
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <body> <table border="1" width="100%"> <tr> <td style="width: 20%"> <div id="tree"> </div> </td> <td style="width: 80%"> <iframe width="100%" marginheight="2" marginwidth="2" height="960" frameborder="1" id="frMain" name="frMain" src=""></iframe> </td> </tr> </table> <script type="text/javascript"> Ext.onReady(function () { var treeLoader = new Ext.tree.TreeLoader({ dataUrl: '/Handler/TreeHandler.ashx', listeners: { scope: this, 'beforeload': function (loader, node) { } } }); var treeRoot = new Ext.tree.AsyncTreeNode({ id: "-1", text: "测试", nodeType: 'async' }); var eTree = new Ext.tree.TreePanel({ autoScroll: true, containerScroll: true, border: false, height: 960, region: 'center', margins: '3 0 20 0', root: treeRoot, loader: treeLoader, renderTo: 'tree', listeners: { scope: this, 'click': function (node, e) { } } }); treeRoot.expand(false, true); }); </script></body> </body></html>