求Extjs做项目的设计思路

Question

公司用Extjs4做一个项目，请问他的基本设计架构是什么，我将怎么布置各页面的显示。
我想了两个方案：
1.一个主要的页面分为上 左 中三个区域，通过点击左边的树后中间区域进行显示，显示的方式是以动态创建panel并添加到这个区域的
2.一个主要的页面分为上 左 中三个区域，通过点击左边的树后中间区域进行显示，显示的方式是把所有不同的panel写到不同的jsp文件中，然后让中间区域显示这个jsp文件不知道这两种方法哪个好，还有没有更好的方案

Answer 1

现在基本都是这样，我们后台就用的左中下，左边是树 中间是动态添加tabpanel中的panel，下吗 就是一些公司介绍 名字什么的，主要要是左右结构

Answer 2

推荐No.1
通过点击左树，动态加载js，生成TabPanel到右侧面板
然后可以在点击其他树节点时销毁之前的TabPanel，重新生成与该节点相关的新TabPanel（当然也可以不做这步操作）另：Ext的API文档就是采用这种结构的 LZ可以看下 或许对你有所启发

Answer 3

第一种吧！我看他们做的项目都采用这种方式，弄一个大viewport然后就是第一种那种。

Answer 4

我们用的第二种，一个子节点对应一个jsp，感觉结构挺清楚，咱做的少，没啥对比....

Answer 5

大开EXTJS生成MIS一下就生成一个MIS,然后不用写直接就可以卖了.
要OA是OA要档案是档案系统的.
只能化生成系统.

Answer 6

请问在Extjs4中怎么去销毁 之前的TabPanel

Answer 7

个人觉得不用销毁，只需动态控制panel即可

Answer 8

设计构架 和你的开发环境真的没关系 
用extjs了 可以参考下mvc模式 和json数据格式
后台不用考虑界面的东西了 只要传输数据就可以了 

Answer 9

第一种方法：对于比较大的项目可能代码会显得拥挤，可能很多代码会写在一个js文件中
第二种方法：比较明确，一个tab也对应一个jsp文件，管理起来比较方便，但是需要每个jsp文件都引入extjs库文件

Answer 10

上、左、中、Ext.onReady(function() {
//TreePanel
 var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true, 
        text:"",
        user:"",
        status:"", 
        children: [
            { text:"detention", expanded: true,
children:[
{ leaf: true,text:'aaa'},
{ leaf: true,text:'bbb'}
]
},
            { text:"homework", expanded: true, 
                children: [
                    { leaf: true,text:'ccc'}
                ]
            },
            { text: "buy lottery tickets", leaf:true }
        ]
    }
});     var txtTreePanel=Ext.create('Ext.tree.Panel', {
    height: '100%',
    store: store,
    rootVisible: false,
listeners : {  
        itemclick : function(view,re){  
            alert(re.data.text);
        }  
    }
});//Viewport 
Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        html: '<h1 id="nobrDateTimeInfo" style="width:100%;text-align:right;"></h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0',
height:'15%'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150,
items:txtTreePanel  //树型导航
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});});