ExtJs布局学习笔记

![ExtJs container子类继承图][1] [1]: http://static.oschina.net/uploads/space/2014/0504/123811_mjKn_240889.png

Ext.viewport:字面意思是视图型。最简单的一个例子就是fitLayout(自适应布局).:

<!-- lang: js -->
Ext.onReady(function(){ //预加载函数,主要是用于当js library加载完成之后再执行自己的代码
        var viewport = new Ext.Viewport({  //当使用Ext.Viewport的时候会提示没有这个函数,需要new一个.里面的内容是集合的形式
            layout:"fit",  //布局样式,自适应
            items:[{title:"ss",html:"test" }] //这个是界面内容,是可以看到的。里面可以嵌套多个panel，数组对象:[{...},{...}]
        });
    });

值得注意的是：同层级的一个内容页面只可以包含一个panel。如果是多个是不会自动覆盖。只有第一个panel有效。此外，因为是fit layout所以不要在item中使用autoHight( true)参数

<!-- lang: js -->
Ext.onReady(function(){
        var store = new Ext.data.SimpleStore({  //数据格式
            fields:['id','姓名','描叙'],  //这个要与dataIndex名字保持一致,不显示
            data:[ //数据项，数组形式
                ['1', 'name1', 'desc1'],
                ['2', 'name2', 'desc2'],
                ['3', 'name3', 'desc3'],
            ]
        });

        var grid = new Ext.grid.GridPanel({// 显示表格面板配置
            title:"测试", 
            viewConfig: {forceFit: true}, //这个是grid的专有对象,当行的大小变化时始终自动充满
            store:store,    //数据
            columns:[
                {header:"id",dataIndex:"id"},
                {header:"姓名",dataIndex:"姓名"},
                {header:"描叙",dataIndex:"描叙"}   //表格头部内容
            ],
            bbar: new Ext.PagingToolbar({ //表格底部翻页
                pageSize : 10,  // 一页显示多少行
                displayInfo : true,   //是否显示翻页信息与displayMsg,emptyMsg同时使用
                displayMsg : '显示第{0}条到{1}条记录，一共{2}条', 
                emptyMsg : '没有记录',
                prevText:'上一页',
                nextText:'下一页',
                refreshText:'刷新',
                lastText:'最后页',
                firstText:'第一页',
                beforePageText:'当前页',
                afterPageText:'共{0}页',
                store: store //数据用来计算当前有多少数据,与上面grid组建里面的store选项不同
            })
        });
        var viewport = new Ext.Viewport({
            layout:'fit', //自适应
            title:"测试",
            items:[grid] //整个表格控件
        });
    });

弹窗式布局: 代码例子：（把上面例子中的Ext.Viewport修改为Ext.Window。并且修改参数即可） <!-- lang: js --> var win = new Ext.Window({ style:"top:100px;", //添加自己的样式 height:400, //高度 width:400, //宽度 layout: 'fit', //自填充 items: [grid] }); win.show(); //显示(这个事件需要触发事件才能激活) 虽然上面的例子可能很勉强了，但是fitlayout还是有局限性。因为它每次只能使用一个子组件.

边框布局 var view = new Ext.Viewport({ layout:"border", //边框布局 items:[ {region:"north",html:"north"}, //北 {region:"west",html:"west"}, //西 {region:"east",html:"east"}, //东 {region:"south",html:"south"},//南 {region:"center",html:"center"} //中间 ] });

右键菜单

<!-- lang: js -->
Ext.onReady(function(){

        var store = new Ext.data.SimpleStore({
            fields: ['id', 'name', 'desc'],
            data: [
                ['1', 'name1', 'desc1'],
                ['1', 'name1', 'desc1'],
                ['1', 'name1', 'desc1'],
                ['1', 'name1', 'desc1'],
                ['1', 'name1', 'desc1'],
                ['2', 'name2', 'desc2'],
                ['2', 'name2', 'desc2'],
                ['2', 'name2', 'desc2'],
                ['2', 'name2', 'desc2'],
                ['2', 'name2', 'desc2'],
                ['2', 'name2', 'desc2'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['3', 'name3', 'desc3'],
                ['4', 'name4', 'desc4']
            ]
        });
        var grid = new Ext.grid.GridPanel({
            title: 'grid',
            height:550,
            viewConfig: {forceFit: true},
            store: store,
            columns: [
                {header:'id', dataIndex: 'id'},
                {header:'名称', dataIndex:'name'},
                {header:'描述', dataIndex:'desc'}
            ],
            tbar: new Ext.Toolbar(['添加','修改','删除']),
            bbar: new Ext.PagingToolbar({
                pageSize : 10,
                displayInfo : true,
                displayMsg : '显示第{0}条到{1}条记录,一共{2}条',
                emptyMsg : '没有记录',
                prevText:'上一页',
                nextText:'下一页',
                refreshText:'刷新',
                lastText:'最后页',
                firstText:'第一页',
                beforePageText:'当前页',
                afterPageText:'共{0}页',
                store: store
            })
        });
        //grid.store.load();
      //右键菜单代码开始
        var context= new Ext.menu.Menu({
            id:"modify",  //右键菜单id
            items:[{  //右键菜单里面的内容:三个菜单选项
                text:"修改", //菜单名字
                handler:function(){  //点击菜单之后要处理的内容
                    Ext.Msg.alert("提示","ok");
                }
            },{
                text:"禁止",
                handler:function(){
                    Ext.Msg.alert("提示","ok");
                }
            },{
                text:"删除",
                handler:function(){
                    Ext.Msg.alert("提示","ok");
                }
            }]
        });
        grid.on("itemcontextmenu",function(view,record,ite,index,e){  //把菜单绑定到grid上面
            e.preventDefault(); //改变默认事件
            context.showAt(e.getXY()); //右键菜单显示位置
        });
        //右键菜单代码结束
        var view = new Ext.Viewport({
            layout:"border",
            items:[
                {region:"north",html:"<div style='display: block;white-space: nowrap'><h2>测试项目</h2>" +
                        "<ul style='float: right;list-style: none;display:inline;white-space: nowrap'>" +
                        "<li>test</li></ul></div>"},
                {region:"west",width:150,maxSize:200,minSize:100,html:"west",split:true},
                {region:"east",width:150,html:"east",split:true},
                {region:"south",html:"south"},
                {region:"center",items:[
                    grid
                ]}
            ]
        });
    });

转载于:https://my.oschina.net/websec/blog/233181