Extjs4循序漸進(二)——Ext的界面(容器和布局)

 容器

一個EXT的界面是由許多的EXt組件構成的，而容器是負責控制每個組件的尺寸和定位。容器本身也是Ext的組件之一，也可以認為是一種存放其他組件的特殊組件。

最普通的容器就是Panel。接下來我們定義一個panel。

 首先是定義方式

         Ext4.X相比起以前，聲明一個新組件的方式有所不同。在3.x中，聲明方法為：

var panel=new Ext.panel(….),而在Ext4.X中申明一個組件的基本方式有2種： 

//第一種
Ext.create('Ext. panel.Panel', {
    title: '福利性住房業務辦理',
width: 200,
…………….. 
});

//第二種
Ext.widget('panel',{  
    title:'ccc',
    width : 100,  
    height : 100  
})

  區別就在與widget方法使用的是比較易於記憶的縮寫，也就是xtpye。在api中，幾乎每一個組件都有xtype，查看方式如下： 

 在實際的編碼中把聲明的組件賦給一個變量，更易於操作，如： 

var fwdz=Ext.create('Ext.form.field.Text',{
         fieldLabel: '房屋地址<span class=\"colorRed\"\>*</span\>',
         name: 'fwdz'
});    

 

 寫一個基本的panel

　　直接上代碼：

var mainPanel =Ext.create('Ext.panel.Panel', {
        title: ' 我的工作台 ',
        border:1,
        padding:5,
        //layout:'column',
        autoScroll:true,
        html:"<div>ccccccccccccccccccc</div>"
    });    
    Ext.onReady(function(){
        mainPanel.render(Ext.getBody());
    });

OK，出來了嘛？是不是簡單了點？好的，讓我們再多定義幾個panel：

var mainPanel=Ext.create('Ext.panel.Panel', {
        title: ' 我的工作台 ',
        border:1,
        padding:5,
        layout:'column',
        autoScroll:true,
        items: [{
                padding:5,
                id: 'dbsy',
                xtype:'panel',
                title: '待辦事宜',    
                width:'49%',
                height:'200',
                html: '<div class="portlet-content" >ccccccccccc</div>'                            
            },{
                padding:5,
                width:'50%',
                xtype:'panel',
                id: 'wdyx',
                title: '我的郵箱',
                height:'200',
                html: '<div class="portlet-content">ccccccccccc</div>'                        
            },{
                padding:5,
                width:'49%',
                xtype:'panel',
                id: 'zzcl',
                title: '正在處理',
                height:'200',
                html: '<div class="portlet-content">ccccccccccc</div>'                                
            },{
                padding:5,
                width:'50%',
                id: 'tzgg',
                xtype:'panel',
                title: '通知公告',
                height:'200',
                html: '<div class="portlet-content">ccccccccccc</div>'                        
            }]
    });    
    Ext.onReady(function(){
        mainPanel.render(Ext.getBody());
    });

在原來的“我的工作台”的基礎上，又加入了4個panel，這里我用了layout:'column'的布局方式。使用column布局，那么它會對他的子元素所占的百分百進行列的排版。若要2列則將子元素的widt屬性設為“50%”，若要3列，則相應的子元素設置屬性“width：33%”。在上面的demo中，我將靠左邊的子元素width設為“49%”，是為了讓左右2個panel相間隔一點間隙。當然，還有另一種方式能夠實現，設置屬性“margin:'0 5px 5px 0'”則該元素會對右邊和下面各間距“5px”。效果圖如下： 

 

我們也可以在mainPanel外把他的子元素定義好，然后再加入，代碼：

Var tzgg= Ext.create('Ext.panel.Panel', {
                padding:5,
                width:'50%',
                title: '通知公告',
                height:'200',
                html: '<div class="portlet-content">ccccccccccc</div>'    
})
//定義一個Panel

var mainPanel=Ext.create('Ext.panel.Panel', {
        title: ' 我的工作台 ',
        border:1,
        padding:5,
        layout:'column',
        autoScroll:true,
        items: [{tzgg ,XXXX,…….}] //在這里將定義的其他組件加入
})

Ext.onReady(function(){
        panel.render(Ext.getBody());
    });

我個人更傾向於這種寫法，思路更清晰。特別是在寫表單項比較多的表單時，可以將任務分配給多個人做。

 

 多種多樣的布局

Ext所提供的布局方式相當豐富，但在這里不一一講解了，有了以上的例子大家應該明白他的基本原理了，其他的布局方式，也大同小異。

在Ext的api中，布局的方式都列出來了，大家可以通過以下圖片查找到。  

 Panel的工具條tool

Panel的右上角可以加入大量的工具按鈕，是由tool屬性來定義的：

var panel=Ext.create('Ext.panel.Panel', {
        title: ' 我的工作台 ',
        border:1,
        padding:5,
        //layout:'column',
        height:200,
        autoScroll:true,
        tools: [
            {type:'toggle',handler: function(){
            // 點擊事件寫在這里
                panel.body.mask('頁面加載中...');
             }},
            {type:'close'},
            {type:'minimize'},
            {type:'maximize'},
            {type:'restore'},
            {type:'gear'},
            {type:'pin'},
            {type:'unpin'},
            {type:'right'},
            {type:'left'},
            {type:'down'},
            {type:'refresh'},
            {type:'minus'},
            {type:'plus'},
            {type:'help'},
            {type:'search'},
            {type:'save'},
            {type:'print'}
        ],
        html: '<div class="portlet-content" >ccccccccccc</div>'    
})

 點擊的事件寫在handler方法中。效果圖如下： 

 

 致歉

因為一直在忙，天天加班，結果導致很久沒更新了，辜負了大家的支持啊。會趁假期多整理出來些，稍后一起放上。對以前的內容也會做調整和更改。