BBS.EXT(56)

一、项目开发顺序

1. 建立界面原型

2. 建立Struts.xml

　　a) 确定namespace

　　b) 确定package

　　c) 确定Action的名称，空的方法

　　d) 确定Result

　　e) 将界面原型页面进行修改，匹配现有设置

　　f) 测试

　　g) 做好规划！！！！！

3. 建立数据库（或者实体类）

4. 建立Model层

5. 建立Service层（后面讲了Hibernate后再完善）

a) 此时可以使用JUnit进行单元测试了

6. 着手开发

 

二、EXT界面原型

（1）框架：

整个视图叫做：viewport

        var viewport = new Ext.Viewport( {
            layout : 'border', //AWT把body分成5个区域，默认是中。这里跟AWT类似
            items : [ accordion, tabPanel ]//有两个布局，一个叫accordion，另外叫tabPanel
        });

 

定义accordion

       var accordion = new Ext.Panel( {
            region : 'west', //panel 位置为左
            margins : '5 0 5 5',
            split : true,
            width : 210,
            layout : 'accordion',
            items : [ item1, item2, item3, item4, item5 ]
        });

 

定义item和button

        //改写的item,是accordion的第一栏，其下还有两个button
        var item1 = new Ext.Panel( {
            title : 'Category管理',
            //html : '<empty panel>',
            cls : 'empty',
            items : [ 
                new Ext.Button({
                    id : 'Category_list', //id相当于是内部识别，text相当于外部展现
                    text : 'Category列表',
                    width : '100%',
                    listeners : {
                        click : addPanel //addPanel方法，激活事件。查看button。click
                    }

                }),

                new Ext.Button({
                    id : 'test',
                    text : 'Test',
                    width : '100%',
                    listeners : {
                        click : addPanel 
                    }

                })

                ]
        });

        //item
        var item2 = new Ext.Panel( {
            title : 'Accordion Item 2',
            html : '<empty panel>',
            cls : 'empty'//css class
        });

 

定义button的事件addPanel

        var addPanel = function(btn, event) {
            var n;
            n = tabPanel.getComponent(btn.id);//查看tabPanel是否有Category_list
            if(n) {
                tabPanel.setActiveTab(n);
                return;
            }
            n = tabPanel.add( {  //没有就增加Category_list
                id : btn.id,
                title : btn.id,
                html : '<iframe width=100% height=100% src=' + btn.id + ' />', //iframe是抠一个窗口，src=action name，用来激活一个action
                //autoLoad : '',
                closable : 'true'
            });
            tabPanel.setActiveTab(n);
        }

 

定义tabPanel

        var tabPanel = new Ext.TabPanel( {
            region : 'center',
            enableTabScroll : true,
            deferredRender : false,
            activeTab : 0, //激活第一个tab，实际就是下面items的第一项
            items : [ {

                title : 'index',

                //html : 'aaaaaa'
                autoLoad : 'Category_add.jsp'//自动加载文件，和index。html同路径
            } ]
        });