ExtJS界面组件之容器、面板、窗口

来源：互联网发布：淘宝森所男装sensu官网编辑：程序博客网时间：2024/05/17 10:41

一：使用Ext.Component:

Ext.Component是最普通、没有额外附加行为的组件，该组件原本是“一无所有“的区域，在该区域可以定制自己的内容

Ext.onReady(function(){    var comp = Ext.create('Ext.Component',{        html: 'JAVA<br/>PHP',        width:300,        height:200,        padding:20,        shadow:true,        resizable:true,        style:{            color:'#f66',            backgroundColor:'#afa'        },        renderTo:Ext.getBody()//该组件追加到<body...>元素中    });    comp.center();})

二：使用Ext.container.Container创建容器

Ext.container.Container代表一个空白的容器，开发者可以将多个组件组合起来，将之放到页面显示出来，就可以使用该容器。

Ext.onReady(function(){ //创建容器对象    var con = Ext.create('Ext.container.Container',{        //指定布局方式        layout:{            type:'vbox',   //垂直排列组件            align:'center'        },        width:300,//指定宽度        height:160,//指定高度        renderTo:Ext.getBody(),//追加到body中        style:{            border:'1px solid black',            background:'#afa'        },        //指定对该容器中所有添加项进行默认设置        defaults:{            labelWidth:100,            flex:1        },        //指定该容器包含的组件        items:[            //日期选择框            {                xtype:'datefield',                name:'startDate',                format:'Y年m月d日',                fieldLabel:'开始日期'            },{                xtype:'datefield',                name:'endDate',                fieldLabel:'结束日期'            },{                xtype:'button',                text:'确定',                width:100,                height:20,                padding:'0px',                margin:'10px',                flex:0//控制组件缩放时的所占比例            }]    });})

这个一般都不用，绝大部分都是在用Ext.panel.Panel

0 0