Ext布局

FitLayout

自动适应页面大小，页面变大的时候Item跟着变大，页面变小的时候Item跟着变小。

使用FitLayout很容易实现这样的功能。

不过，FitLayout中的Item只能有一个，如果有多个则会忽略其他的。

示例：

Ext.onReady(function(){

    // data for grid

    var data1 = [

        [2,"里斯",22,"man"],

        [3,"李四",24,"man"],

        [4,"丽丝",25,"woman"],

        [5,"王五",26,"man"],

        [6,"王武",26,"man"],

        [7,"周瑜",27,"man"],

        [8,"小乔",27,"woman"],

        [9,"罗密欧",27,"man"],

        [10,"朱丽叶",28,"woman"]

    ];

    // array reader

    var reader =new Ext.data.ArrayReader({},[

           {name:"id",type:"int"},

           {name:"name"},

           {name:"age",type:"int"},

           {name:"sex"}

    ]);

   

    var store1 =new Ext.data.Store({

        data:data1,

        reader:reader

    });

   

    var grid =new Ext.grid.GridPanel({

        id:"grid1",

        title:"Grid1",

        viewConfig:{

            forceFit:true

        },

        columns:[

            {header:"编号",dataIndex:"id",sortable:true},

            {header:"名字",dataIndex:"name"},

            {header:"年龄",dataIndex:"age",sortable:true},

            {header:"性别",dataIndex:"sex",sortable:true}

        ],

        store:store1,

        frame:true,

        width: 750,

        height:200,

        collapsible: true,

        animCollapse: false,

        enableDragDrop :true

    });

   

    new Ext.Viewport({

        layout: 'fit',

        items: [grid]

    });

 

});

效果就是页面上一个表格，跟随页面的大小变化。

 

 

25.2BorderLayout

将整个区域分布成东西南北中5个区域，除了中间区域，其他区域是可以省略的。

可以设置split:true来允许用户拖放改变某一个区域的大小，同时设置minSize和maxSize防止某一个区域太大或大小导致显示混乱。

设置collapsible:true可以折叠某一个区域，以实现隐藏。

示例代码：

// border layout

newExt.Viewport({

    layout: 'border',

    items: [{

        region: 'north',

        html: '<h1class="x-panel-header">Page Title</h1>',

        autoHeight: true,

        border: false,

        margins: '0 0 5 0'

    }, {

        region: 'west',

        collapsible: true,

        title: 'Navigation',

        xtype: 'treepanel',

        width: 200,

        autoScroll: true,

        split: true,// 用户可以自行拖放改变大小

        minSize:120, // 拖放的最小尺寸，以免显示混乱

        maxSize:600, // 拖放的最大尺寸，以免显示混乱

        loader: new Ext.tree.TreeLoader(),

        root: new Ext.tree.AsyncTreeNode({

            expanded: true,

            children: [{

                text: '员工管理',

                children:[

                    {text:"新增员工",leaf:true}         

                ]

            }, {

                text: 'Menu Option 2',

                leaf: true

            }, {

                text: 'Menu Option 3',

                leaf: true

            }]

        }),

        rootVisible: false,

        listeners: {

            click: function(n) {

                Ext.Msg.alert('Navigation Tree Click','You clicked: "' + n.attributes.text +'"');

            }

        }

    }, {

        region: 'center',

        xtype: 'tabpanel',

        items: [{

            title: 'Default Tab',

            html: 'The first tab\'s content. Othersmay be added dynamically'

        },{

            title: 'Tab 2',

            html: 'The second tab\'s content. Othersmay be added dynamically'

        }]

    }, {

        region: 'south',

        title: 'Information',

        collapsible: true,

        html: 'Information goes here',

        split: true,// 用户可以自行拖放改变大小

        height: 100,

        minHeight: 100

    }, {

        region: 'east',

        title: 'About',

        collapsible: true,

        html: 'About Information goes here',

        split: true,// 用户可以自行拖放改变大小

        height: 100,

        minHeight: 100,

        collapsible:true

    }]

});

 

显示效果：

West和East2个区域可以折叠，可以拖放改变大小。

 

 

25.3制作伸缩菜单的布局——Accordion

 

 

示例：

// Accordion

newExt.Viewport({

    layout:"border",

    items:[

        {

        region:"west",

        layout:"accordion",

        width:200,

        items:[

            {

                 title:"人员管理",

                 html:"员工档案管理"              

             },

             {

                 title:"考勤管理",

                 html:"员工考勤管理"              

            },

             {

                 title:"薪资管理",

                 html:"员工薪资管理"              

            }

        ]

        },

        {

        region:"center",

        html:"Center"

        }

          

    ]

});

 

效果：

单击标题或后面的图标可以折叠或收缩。

 

 

25.4操作向导布局——CardLayout（卡片布局）

可以看做是一叠卡片，从上面看，每次只能看到一张卡片。

 

示例：

// CardLayout

varnavHandler =function(direction){

    var layout = card.getLayout();

    var activeItem = layout.activeItem.id;

    var btnPrev = Ext.getCmp("move-prev");

    var btnNext = Ext.getCmp("move-next");

   

    if (direction == 1) {// Button Next

            if (activeItem =="card-0") {

                layout.setActiveItem("card-1");

                btnPrev.enable();

            }

            elseif (activeItem =='card-1') {

                layout.setActiveItem("card-2");

                btnNext.disable();

            }

    }

    else {// Button Prev

        if (activeItem =='card-1') {

            layout.setActiveItem("card-0");

            btnPrev.disable();

            btnNext.enable();

        }

        elseif (activeItem =='card-2') {

            layout.setActiveItem("card-1");

            btnNext.enable();

        }

    }

};

 

varcard= new Ext.Panel({

    title: 'Example Wizard',

    layout:'card',

    activeItem: 0, // make sure the active item isset on the container config!

    renderTo:document.body,

    height:300,

    bodyStyle: 'padding:15px',

    defaults: {

        // applied to each contained panel

        border:false

    },

    // just an example of one possiblenavigation scheme, using buttons

    bbar: [

        {

            id: 'move-prev',

            text: 'Back',

            handler:navHandler.createDelegate(this, [-1]),

            disabled: true

        },

        '->',// greedy spacer so that the buttons are aligned to eachside

        {

            id: 'move-next',

            text: 'Next',

            handler:navHandler.createDelegate(this, [1])

        }

    ],

    // the panels (or "cards") withinthe layout

    items: [{

        id: 'card-0',

        html: '<h1>Welcome to theWizard!</h1><p>Step 1 of 3</p>'

    },{

        id: 'card-1',

        html: '<p>Step 2 of 3</p>'

    },{

        id: 'card-2',

        html: '<h1>Congratulations!</h1><p>Step3 of 3 - Complete</p>'

    }]

});

 

效果：

单击Next按钮

单击Next按钮