有人会extjs的吗？麻烦帮我看一下

Question

这是一个用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>

Answer 1

树可以放在单独一个html中，你这已经分了west和center 也就是用了border布局，west中的items:[tree]可以直接是树   也可以是一个htmlitems:[
    html:'<iframe src="\\..\\tree.html"></iframe>'
]

Answer 2

<!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>