小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

ExtJs學習筆記基礎篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

 賈朋亮博客 2012-05-24
聲明：本文案例講解摘自資料，部分資料收集自他人博客。 
通過此文能學習到如下內(nèi)容
       1.創(chuàng)建一個簡單的面板 Ext.Panel
       2.制作一個可以拖動的面板 Ext.Panel
       3 .使用選項卡面板
       3.使用Ext.Viewport搭一個簡單布局(用一個小例子來總結(jié)本文所有內(nèi)容)

       面板是ExtJs控件的基礎，很多控件都是在面板的基礎上擴展的，或者他會與其他控件之間有關系。
       面板由一個工具欄、一個底部工具欄、面板頭部、面板尾部和面板主區(qū)域幾個部分組成。面本類中還提供了面板展開、關閉等功能。并提供了一些可重用的工具按鈕讓我們靈活的控制面板。面板可以放入其他任何容器中，面板本身也是一個容器，所以面板里面也可以包含其他組件。面板的類名為Ext.Panel,其xtype為panel。
       看下面一個例子來顯示出面板的各個組成部分：
復制代碼
//普通的面板
function panel(){
    var panel=new Ext.Panel({
        renderTo:'panel',
        title:'面板的頭部',
        width:400,
        height:200,
        html:'<h1>面板的主顯示區(qū)域..可包含任何html代碼</h1>',
        tbar:[{text:'頂部工具欄按鈕'}],
        bbar:[{text:'底部工具欄'}],
        buttons:[
            {
                text:'面板底部按鈕',
                handler:function()
                {
                    Ext.Msg.alert('提示','面板底部按鈕的事件！');
                }
            }
        ]
    });
}
復制代碼
      上面的代碼就不做詳細介紹了，特別注意的一點是renderTo:'panel'，這句代碼負責把面板綁定到一個div層里，panel就是div的ID。
<div id="panel"></div>
      代碼執(zhí)行后會顯示下面的效果：


      效果不錯吧！面板中可以有多個工具欄，可以位于面板的頂部或底部，Ext工具欄是由Ext.Toolbar類表示。工具欄可以存放按鈕、文本等內(nèi)容。而且面板中還提了一些實用的工具欄，可以通過tools配置屬性向面板頭部加入工具欄選項，看下面的案例：
復制代碼
function panel(){
    var panel=new Ext.Panel({
        tools:[
            {id:"save"},
            {id:"help"},
            {id:"up"},
            {
                id:"close",
                handler:function(){
                    Ext.MessageBox.alert("工具欄按鈕","工具欄的關閉按鈕事件")
                }
            }
        ],
        renderTo:'panel',
        title:'面板的頭部',
        width:400,
        height:200,
        html:'<h1>面板的主顯示區(qū)域..可包含任何html代碼</h1>',
        tbar:[{text:'頂部工具欄按鈕'}],
        bbar:[{text:'底部工具欄'}],
        buttons:[
            {
                text:'面板底部按鈕',
                handler:function()
                {
                    Ext.Msg.alert('提示','面板底部按鈕的事件！');
                }
            }
        ]
    });
}
復制代碼

 
     跟普通的面板沒什么區(qū)別，只是多了個tools配置屬性，可以通過ID來設置工具欄選項種類，如果需要給工具欄選項添加事件，則直接配置handler屬性就可以。下面我為大家貼了一些id的枚舉值：
復制代碼
toggle (collapsable為true時的默認值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
復制代碼
        上面的東西我也沒有全部測試，如果大家感興趣就自己試一下吧。
        如果我們需要讓這個面板可以拖動，需要加3個配置屬性，改變一處配置。
復制代碼
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
draggable: {
        insertProxy: false,//拖動時不虛線顯示原始位置
        onDrag : function(e){
               var pel = this.proxy.getEl();
             this.x = pel.getLeft(true);
               this.y = pel.getTop(true);//獲取拖動時panel的坐標
         var s = this.panel.getEl().shadow;
    },
    endDrag : function(e){
                  this.panel.setPosition(this.x, this.y);//移動到最終位置
        }
}
復制代碼
       x與y是設置在屏幕顯示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加載。
       draggable是拖動時設置，onDrag是在拖動時觸發(fā)的事件，endDrag是結(jié)束拖動時事件。
       效果:

     這樣就可以拖動了，但是會發(fā)現(xiàn)在拖動時有一個黑框框，這樣可能有些不美觀了。如果我們需要讓這個黑框隨著移動位置而變化。那么我們需要在onDrag事件函數(shù)中加如下代碼:
if (s) {
    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
    看看拖動例子的全部代碼：
復制代碼
//可以拖動的面板
function panelDrag(){
    var panel=new Ext.Panel({
        title: '拖一下看看我動不.',
        x:88,
        y: 88,
        renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
        floating: true,//true
        frame: true,//圓角邊框
        width: 400,
        height: 200,
        draggable: {
                   insertProxy: false,//拖動時不虛線顯示原始位置
                  onDrag : function(e){
                    var pel = this.proxy.getEl();
                       this.x = pel.getLeft(true);
                       this.y = pel.getTop(true);//獲取拖動時panel的坐標
            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
            },
            endDrag : function(e){
                      this.panel.setPosition(this.x, this.y);//移動到最終位置
                }
        }
    })
}
復制代碼

       Ext.Panel有幾個子類，所以來介紹一下Panel中常見的配置屬性、方法，下面內(nèi)容是資料中的：
復制代碼
1.autoLoad：有效的url字符串，把那個url中的body中的數(shù)據(jù)加載顯示，但是可能沒有樣式和js控制，只是html數(shù)據(jù)
2.autoScroll:設為true則內(nèi)容溢出的時候產(chǎn)生滾動條，默認為false
3.autoShow:設為true顯示設為"x-hidden"的元素，很有必要，默認為false

4.bbar:底部條，顯示在主體內(nèi)，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}],
5.tbar:頂部條，顯示在主體內(nèi)，//代碼:tbar:[{text:'頂部工具欄topToolbar'}],
6.buttons:按鈕集合，自動添加到footer中（footer參數(shù)，顯示在主體外）//代碼：buttons:[{text:"按鈕位于footer"}]
7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認為right

8.collapsible：設為true，顯示右上角的收縮按鈕，默認為false
9.draggable:true則可拖動，但需要你提供操作過程，默認為false

10.html:主體的內(nèi)容
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值
12.width：寬度
13.height：高度
13.title:標題

14.titleCollapse：設為true，則點擊標題欄的任何地方都能收縮，默認為false.

15.applyTo：（id）呈現(xiàn)在哪個html元素里面
16.contentEl：（id）呈現(xiàn)哪個html元素里面，把el內(nèi)的內(nèi)容呈現(xiàn)
17.renderTo：（id）呈現(xiàn)在哪個html元素里面
復制代碼

      applyTo、contentEl、renderTo三者區(qū)別個人理解為：applyTo和RenderTo綁定到html元素中，contentEl則是html元素到ext組件中去。
      上面說到面板都是綁定在某個html元素中顯示面板，是局部的。Extjs中還有一個可以顯示在整個body中的組件Ext.ViewPort，它會隨著瀏覽器而變化。要注意的是一個頁面中只能存在一個viewport的實例?？聪旅娴拇a
復制代碼
function viewport(){
    var view=new Ext.Viewport({
        enableTabScroll:true,
        layout:"fit",
        items:[
            {
                title:'標題',
                html:"內(nèi)容",
                bbar:[
                    {text:"按鈕1"}
                ]
            }
        ]
    })
}
復制代碼

      與其它使用方式大同小異，Viewport不需要指定renderTo，Viewport通常用于網(wǎng)站主頁面，Viewport常用布局有fit、border等，設置layout屬性改變布局。
      基本的面板我們了解了，還有一個很重要的面板TabPanel，這里用一個小例子做說明，代碼就不解釋了。面板的用法是非常靈活的，我們可以發(fā)揮自己的想象力來做出漂亮的選項卡面板和實用的功能。因為它是可以無限嵌套控件的。
復制代碼
function tabpanel(){
    var tabpanel=new Ext.TabPanel({
        activeTab:0,    //設置默認選擇的選項卡
        renderTo:'tabpanel',
        width:200,
        height:150,
        items:[
            {
                title:"第一個選項",
                html:"第一個的內(nèi)容"
            },
            {
                title:"第二個選項",
                html:"第一個的內(nèi)容"
            }
        ]
    });
}
復制代碼


     對待本人用到的東西來做一個小設計。代碼不多做講解，發(fā)一下代碼和效果吧
復制代碼
function viewportlayout(){
    var view=new Ext.Viewport({
        enableTabScroll:true,
        layout:"border",
        items:[
            {
                title:'面板',
                html:"沒有美術細胞，布局比較難看",
                region:"north",
                height:50
            },
            {
                title:'菜單',
                collapsible:true,
                html:"菜單欄",
                region:"west",
                width:200
            },
            {
                xtype:"tabpanel",
                activeTab: 0,
                region:"center",
                items:[
                    {title:"面板1",html:"tab面板1的內(nèi)容"},
                    {title:"面板2",html:"tab面板2的內(nèi)容"}
                ]
            }
        ]
    })
}
復制代碼


      基本的面板應用就算說完了?？赡苡行┤苏J為文章寫的很基礎，沒辦法，我也是初學，只能寫應用。還沒能去研究ext的源碼。如果各位對文章有什么不好的地方或者需要改進的地方請留言說明，我會盡量做到。
     源碼打包:http://files.cnblogs.com/dirain/ExtJsDemo3.rar

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多