ExtJs layout

bjqincy

浏览: 229362 次
性别:
来自: beijing

最近访客更多访客>>

summer_1988

a395862870

visionlzs

hacker10086

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

EXT HTML

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
[list]

absolute 顾名思义，在容器内部，根据指定的坐标定位显示

accordion 这个是最容易记的，手风琴效果

Java代码

Ext.onReady(function(){
    var bd = Ext.getBody();
                var panel = new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
                {
                    renderTo: bd,
                    title: 'uu',
                    layout: 'accordion',
                    width: 500,
                    height: 200,
                    layoutConfig: {
                        animate: false
                    },
                    items: [{
                        title: '元素1',
                        html: ''
                    }, {
                        title: '元素2',
                        html: ''
                    }, {
                        title: '元素3',
                        html: ''
                    }, {
                        title: '元素4',
                        html: ''
                    }]
                });
            });

anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

Java代码

Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器宽度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});

Ext.onReady(function() {
        var panel1 = new Ext.Panel({
            title: "panel1",
            height: 100,
            anchor: '-50',
            html: "高度等于100，宽度=容器宽度-50"
        });

        var panel2 = new Ext.Panel({
            title: "panel2",
            height: 100,
            anchor: '50%',
            html: "高度等于100,宽度=容器宽度的50%"

        });

        var panel3 = new Ext.Panel({
            title: "panel3",
            anchor: '-10, -250',
            html: "宽度=容器宽度-10,高度=容器宽度-250"

        });

        var win = new Ext.Window({
            title: "Anchor Layout",
            height: 400,
            width: 400,
            plain: true,                    
            layout: 'anchor',
            items: [panel1, panel2,panel3]            
        });
        win.show();
    });

border 将容器分为五个区域:east,south,west,north,center

Java代码

Ext.onReady(function() {
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true
}]
});
//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true,
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show(button);
});
});

 Ext.onReady(function() {     

        var button = Ext.get('show-btn');
        var win;
        
        button.on('click', function() {

            //创建TabPanel
            var tabs = new Ext.TabPanel({
                region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                margins: '3 3 3 0',
                activeTab: 0,
                defaults: {
                    autoScroll: true
                },
                items: [{
                    title: 'Bogus Tab',
                    html: "第一个Tab的内容."
                }, {
                    title: 'Another Tab',
                    html: "我是另一个Tab"
                }, {
                    title: 'Closable Tab',
                    html: "这是一个可以关闭的Tab",
                    closable: true
}]
                });

                //定义一个Panel
                var nav = new Ext.Panel({
                    title: 'Navigation',
                    region: 'west', //放在西边，即左侧
                    split: true,
                    width: 200,
                    collapsible: true, //允许伸缩
                    margins: '3 0 3 3',
                    cmargins: '3 3 3 3'
                });

                //如果窗口第一次被打开时才创建
                if (!win) {
                    win = new Ext.Window({
                        title: 'Layout Window',
                        closable: true,
                        width: 600,
                        height: 350,
                        border : false,
                        plain: true,
                        layout: 'border',
                        closeAction:'hide',
                        items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                    });
                }
                win.show(button);
            });
        });

card 像安装向导一样，一张一张显示

Java代码

Ext.onReady(function(){
                var bd = Ext.getBody();

                var cardNav = function(incr){
                    var l = Ext.getCmp('card-wizard-panel').getLayout();
                    var i = l.activeItem.id.split('card-')[1];
                    var next = parseInt(i) + incr;
                    l.setActiveItem(next);
                    Ext.getCmp('card-prev').setDisabled(next == 0);
                    Ext.getCmp('card-next').setDisabled(next == 2);
                };

                var cardWizard = new Ext.Panel({
                    id: 'card-wizard-panel',
                    title: 'Card Layout (Wizard)',
                    layout: 'card',
                    width: 300,
                    height: 600,
                    renderTo: bd,
                    activeItem: 0,
                    bodyStyle: 'padding:15px',
                    defaults: {
                        border: false
                    },
                    bbar: ['->', {
                        id: 'card-prev',
                        text: '« Previous',
                        handler: cardNav.createDelegate(this, [-1]),
                        disabled: true
                    }, {
                        id: 'card-next',
                        text: 'Next »',
                        handler: cardNav.createDelegate(this, [1])
                    }],
                    items: [{
                        id: 'card-0',
                        html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
                    }, {
                        id: 'card-1',
                        html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'
                    }, {
                        id: 'card-2',
                        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
                    }],

                })


            })

column 把整个容器看成一列,然后向容器放入子元素时

Java代码

Ext.onReady(function() {
var win = new Ext.Window({
title: "Column Layout",
height: 300,
width: 400,
plain: true,
layout: 'column',
items: [{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
height:200
},
{
title:"width=250px",
width: 200,
height:100,
html:"固定宽度为250px"
}
]
});
win.show();
});

Ext.onReady(function() {
        var win = new Ext.Window({
            title: "Column Layout",
            height: 300,
            width: 400,
            plain: true,
            layout: 'column',
            items: [{
                title:"width=50%",
                columnWidth:0.5,
                html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
                height:200
            },
            {
                title:"width=250px",
                width: 200,
                height:100,
                html:"固定宽度为250px"
            }            
            ]
        });
        win.show();
    });

fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

Java代码

Ext.OnReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});

Ext.OnReady(function(){
var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'fit',
       width:500,
       height:100,
       items:[
        {title:'子元素1'},
        {title:'子元素2'},
        {title:'子元素3'},
        {title:'子元素4'},
        {title:'子元素5'}
       ]
      }
     );
});

form 是一种专门用于管理表单中输入字段的布局

Java代码

Ext.onReady(function() {
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
{
fieldLabel:"呢称",
name:"nickname"
},
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
});

Ext.onReady(function() {
        var win = new Ext.Window({
            title: "form Layout",
            height: 150,
            width: 230,
            plain: true,
            bodyStyle: 'padding:15px',
            items: 
            {
                xtype: "form",
                labelWidth: 30,
                defaultType: "textfield",
                frame:true,
                items: 
                [
                    {
                        fieldLabel:"姓名",
                        name:"username",
                        allowBlank:false
                    },
                    {
                        fieldLabel:"呢称",
                        name:"nickname"
                    },
                    {
                        fieldLabel: "生日",
                        xtype:'datefield',
                        name: "birthday",
                        width:127
                    }
                ]
            }
        });
        win.show();
    });

table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

Java代码

Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'table',
width:500,
height:200,
layoutConfig:{columns:3},//将父容器分成3列
items:[
{title:'元素1',html:'ssssssssss',rowspan:2,height:100},
{title:'元素2',html:'dfffsddsdfsdf',colspan:2},
{title:'元素3',html:'sdfsdfsdf'},
{title:'元素4',html:''}
]
}
);
});

分享到：

Oracle WebLogic Portal下载地址 | solaris上安装JDK的方法

2010-07-20 15:20
浏览 1337
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJs layout

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJs layout

评论

发表评论

相关推荐

重写openalyers 的方法，加载天地图瓦片数据

ArcGIS客户端API中加载大量数据的几种解决办法

table_border.html

jquery 菜单效果一个

验证验证

jquery validate.js x学习

CSS 定义鼠标的样式

学习AJAX框架后的理解

jquey中的$符号与其他框架的$的冲突解决方法

IE6下div不能将select框遮住

DHTMLX框架AJAX

关于页面的传值

jQuery 的CSS属性

jQuery 理解

jquery理解

内存泄露与闭包

JavaScript的跨域问题

使用dtmlxGrid 未知运行的错误。与显示不出来的情况

javaScript 中 call 函数与apply的用法说明

javascript 中this 的用法

最近访客更多访客>>