+ -
当前位置:首页 → 问答吧 → ext页面布局的问题

ext页面布局的问题

时间:2011-10-24

来源:互联网

最近开始学习ext使用了。
用ext写了一个例子。
但是刚才调试的时候发现一些问题。
整个页面使用了border布局。
右边使用的是树形列表。点击节点会在center块加载一个新页面。
但是这样每点一个节点。页面的元素都会增加
给点建议。
这样是不是不对的写法。各位给点建议。

JScript code
new Ext.Viewport( {
            layout : 'border',//布局的方式:board布局会把页面分为5个部分。东西南北中。在item中设置region确定位置。center不可以省略。其他随意
            //布局中存在的子容器或者子项
            items : [ {
            
                html : '<div id="aboutDiv2"><img alt="" src="images/login_01.jpg"></div>',//显示的html
                region : 'north',//该item方位
                height : 100
            }, {
                title : '功能菜单',
                layout : 'accordion',
                    layoutConfig : { // 布局
                        titleCollapse : true,
                        animate : true,
                        activeOnTop : false
                    },
                 items : [{
                                title : '营销管理',
                                items :  sellMenu,
                                iconCls : 'system'// 字面板样式
                            },{
                                title : '客户管理',
                                items :  customerMenu,
                                iconCls : 'money_box'// 字面板样式
                            },
                            {
                                title : '服务管理',
                                items :  serviceMenu,
                                iconCls : 'money_box'// 字面板样式
                            },
                            {
                                title : '统计报表',
                                items :  reportsMenu,
                                iconCls : 'money_box'// 字面板样式
                            },
                            {
                                title : '基础数据',
                                items :  basedataMenu,
                                iconCls : 'money_box'// 字面板样式
                            },
                            {
                                title : '系统设置',
                                items :  sysConMenu,
                                iconCls : 'money_box'// 字面板样式sysConMenu
                                
                            }
                            ],
                split : true,//布局之间是否有分割
                collapsible : true,
                region : 'west',
                width : 150
            }, {
                title : '系统说明',
                contentEl : 'aboutDiv',//要显示的jsp对象
                collapsible : true,
                id : 'mainContent',
                region : 'center'
            } ]
        });


JScript code
        var sysConNode1 = new Ext.tree.TreeNode( {
            //显示名称
                text : '人员管理',
                url: 'sysCon/userManager.jsp'
            });




作者: jiyou1992989   发布时间: 2011-10-24

JScript code

        var basedataMenu = new Ext.tree.TreePanel( {
            border : false,
            root : basedataMainNode,
            rootVisible :false,
            listeners:{
            click:function(node, e){
                mainPanel.load({
                    url:node.attributes.url,
                    callback:function(){
                        mainPanel.setTitle(node.text);
                    },
                    scripts:true
                });
            }
        }
                });



作者: jiyou1992989   发布时间: 2011-10-24