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

ExtJS技术学习 https://www.itkc8.com

一：使用Ext.Component:

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

 

Ext.onReady(function(){
    var comp = Ext.create('Ext.Component',{
        html: 'JAVA
PHP',
        width:300,
        height:200,
        padding:20,
        shadow:true,
        resizable:true,
        style:{
            color:'#f66',
            backgroundColor:'#afa'
        },
        renderTo:Ext.getBody()//该组件追加到元素中
    });
    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
ExtJS技术学习 https://www.itkc8.com