Ext Js簡單面板及工具欄的創建使用

面板是比較基礎的組件，很多的組件都是在Panel的基礎上封裝、創建的，可以把面板理解為一個容器，可以存放一些更多的組件在里面讓頁面更好看、功能更完善。
1.對於Panel中的tbar\bbar\buttons的創建使用（其中和下文中的divId即為頁面中一個div標簽的id）

function testPanel1(divId) {
    var testPanel = new Ext.Panel({
        title: 'TestSimplePanel1', renderTo: divId,  //渲染區域,頁面可定義不同區域，進行渲染
        html: '<h1 style="height:1000px">Panel Content</h1>',
        tbar: [{ text: 'Top Tool Bar', handler: function () { Ext.Msg.alert('Info','TT') } }],
        bbar: [{ text: 'Bottom Tool Bar'}],
        //fbar: [{ text: '按鈕' }, { text: '按鈕1'}]
         buttons: [{ text: 'Bottom Buttom'}]
    });
}

2.對於Panel的tools的創建使用

function testPanel3(divId) {
    var testPanel = new Ext.Panel({
        title: 'TestSimplePanel3', width: 500, height: 200, renderTo: divId,
        html: '<h1>You Will Get More Info From The Open Source!</h1>',
        tools: [//其中只需指定id就會顯示,還有一些其他的在文章最后說明一下
                    {id: 'save' },
                    { id: 'help', handler: function () { Ext.Msg.alert('help', 'This is Info!'); } },
                    { id: 'colse', handler: function () { Ext.Msg.alert('信息提示', '這是關閉操作！'); } }
                ],
        tbar: [{ text: "測試", handler: function () { alert('TT'); } }]
    });
}

3.對於Ext.Toolbar的創建使用

function testPanel4(divId) {
    var testPanle = new Ext.Panel({
        title: 'TestSimplePanel4', width: 500, height: 200, renderTo: divId,
        html: '<h1>You Will Get More Info From The Open Source!</h1>',
        tbar: [
                    new Ext.Toolbar.TextItem("工具欄："),
                    { text: "添加" },
                    { xtype: "tbfill" },
                    { xtype: "tbseparator" },
                    { text: '保存' }
                ]
    });
}

4.對於在Viewport中Panel的創建使用

function testViewPort() {
    var viewPort = new Ext.Viewport({
        enableTabScroll: true, layout: "fit", //ViewPort無需指定渲染區,默認選擇整個瀏覽器
        items:
             [
                { title: "PanelOne", html: "<h1>This is Panel One!</h1>",
                    bbar: [
                    { id: "btnOne", text: "ButtonOne", handler: function () { alert(this.id) } },
                    { id: "btnTwo", text: "ButtonTwo", handler: function () { alert(this.text) } }
                    ]
                }
             ]
    });
}

5.對於Viewport中Border布局面板顯示的效果

function testVPBorder() {
    var viewPort = new Ext.Viewport({
        enableTabScroll: true, layout: "border",
        items:[
                    { title: "ViewPortTitleNorth", region: "north", height: 100, html: "<h1>This is Top Title!</h1>" },
                    { title: "Menu", region: "west", width: 150, collapsible: true, html: "<h1>This is The Menu!</h1>" }, //collapsible:自動折疊
                    { xtype: "tabpanel", region: "center",items: [{ title: "PanelOne" }, { title: "PanelTwo"}]}
              ]
    });
}

6.對於API文檔中對於Ext.Toolbar的創建使用

function GSample() {
    var tb = new Ext.Toolbar({//創建工具欄
        renderTo: document.body,width: 600,height: 100,
        items: [
                    { text: '按鈕' }, //按鈕
                    {xtype: 'splitbutton', text: 'Split Button',
                    menu: new Ext.menu.Menu({ items: [{ text: 'TT' }, { text: 'PP'}] })},
                    '->',  // Ext.Toolbar.Fill（填充空白）
                    {xtype: 'textfield', name: 'field1', emptyText: '請輸入查詢內容' }, //文本框
                    '-', // {xtype: 'tbseparator'} （分隔符）
                    '文本1', //{xtype: 'tbtext', text: 'text1'} Ext.Toolbar.TextItem(文本)
                    {xtype: 'tbspacer' }, // ' '  Ext.Toolbar.Spacer（空格）
                    '文本2',
                    { xtype: 'tbspacer', width: 50 }, //（空格50px）
                    '文本3'
                ]
    });

    var combo = new Ext.form.ComboBox({//創建ComboBox
        store: new Ext.data.ArrayStore({//數據ArrayStore
            autoDestroy: true, //是否隨Store的銷毀一起銷毀
            fields: ['userID', 'Name'], //字段
            data: [['userID1', '李明'], ['userID2', '李白']]//數據
        }),
        displayField: 'Name',
        typeAhead: true, //輸入內容延遲自動匹配
        mode: 'local',   //數據本地
        forceSelection: true, //單選
        triggerAction: 'all', //觸發點擊 查詢all
        emptyText: '請選擇一個名字......',
        selectOnFocus: true,
        width: 135,
        getListParent: function () {
            return this.el.up('.x-menu');
        },
        iconCls: 'no-icon'
    });

    var menu = new Ext.menu.Menu({//創建菜單
        id: 'mainMenu',
        items: [
               combo//將Comb添加到菜單
               ]
    });

    tb.add({//二級菜單
        text: 'Button w/ Menu',
        menu: menu
    });
    tb.doLayout(); //強制容器重新計算渲染
}

7.對於TabPanel的創建使用

function TT() {
    var win = new Ext.Window({
        title: 'Window Title', height: 300, width: 450,
        items: [
                new Ext.TabPanel({
                    id: 'tabPanel', renderTo: Ext.getBody(), height: 260, activeTab: 0,
                    bodyStyle: { background: 'Green', color: 'Orange' },
                    tools: [//父面板tools顯示
                    { id: 'save', handler: function () { alert('保存成功！'); } },
                    { id: 'help', handler: function () { alert('幫助信息！'); } },
                    { id: 'close', handler: function () { alert('銷毀面板！'); Ext.getCmp('tabPanel').destroy(); } }
                    ],
                    items: [
                    { title: '面板1', html: '<h1>我是面板1</h1>',
                        tbar: [//面板1：tbar顯示
                    { text: 'tbarAdd' }, '->', { xtype: 'textfield', id: 'txtContent', width: 120, emptyText: '請輸入查詢內容' },
                    { text: 'tbarSearch', handler: function () { alert(Ext.getCmp('txtContent').getValue()) } }
                    ]
                    },
                    { title: '面板2', html: '<h1>我是面板2</h1>',//面板2：bbar顯示
                        bbar: [{ text: 'bbarAdd' }, { xtype: 'tbspacer', width: 50 }, { text: 'bbarUpdate'}]
                    },
                    { title: '面板3', html: '<h1>我是面板3</h1>',//面板3：buttons顯示
                        buttonAlign: 'left', buttons: [{ text: 'buttonsLeft' }, '->', { text: 'buttonsRight'}]
                    },
                    { title: '面板4', html: '<h1>我是面板4</h1>',//面板4：fbar顯示
                        buttonAlign: 'left', fbar: [{ text: 'fbarLeft' }, '->', { text: 'fbarRight'}]
                    }
                    ]
                })
                ]
    }).show();
}

8.對於Ext Js樣式簡單調整style\bodyStyle\defaults的使用

function extendPanel() {
    var testPanelStyle = new Ext.Panel({
        title: 'Panel Title', width: 500, height: 300, renderTo: Ext.getBody(),
        style: "width: 100%; height: 100%; background-color: Red",
        //style: { color: 'red', marginTop: '0px', marginLeft: '100px' }, //樣式測試
        bodyStyle: { background: 'Orange' }, //body樣式測試
        //bodyStyle: 'background-color:Purple;color:blue',
        items: [{ title: '探討'}],
        html: '<h1>Panel Content</h1>',
        tbar: [
                { id: 'tbOne', text: 'Top Tool Bar One', handler: function () { alert('TopToolBarOne'); } },
                { id: 'tbTwo', text: 'Top Tool Bar Two', handler: function () { alert(this.text); } }
              ],
        bbar: [{ id: 'bbarOne', text: 'Bottom Tool Bar'}],
        buttons: [{ id: 'btnOne', text: 'Bottom Buttom'}]
    });
}

9.對於Viewport的Border布局中north\west\east\south\center的Panel的創建和使用

function extendViewPort() {
    var viewPortBorder = new Ext.Viewport({
        layout: "border",
        items: [//對於north和south只需設定高度,對於west和east只需設定寬度,center自動填充
                { region: "north", title: "ViewPortTitle", height: 80, collapsible: true, html: "<h1>North Content</h1>" },
                { region: "west", title: "Menu", width: 150, collapsible: true, split: true, //寬度為5px
                    items: [
                    new Ext.Panel({ border: false,
                        items: [
                        { text: "Panle1", height: 100, html: "<h1>Mencollapsibleu West One</h1><div id='divUrl' style='margin-left:10px'></div>" },
                        { text: "Panel2", height: 100,
                            html: '<h1>Menu West Two</h1>'
                        }
                    ]
                    })
                ]
                },
                { xtype: "tabpanel", region: "center", activeTab: 1, border: false, collapsible: true,
                    items: [
                    { title: "Panel One", style: { color: "Purple" }, html: "<h1>This is The Panel Center One Content!</h1>" },
                    { title: "Panel Two", style: { color: "Blue" }, html: "<h1>This is the Panel Center Two Content!</h1>" }
                    ]
                },
                { title: "Border East", region: "east", width: 150, split: true, collapsible: true, layout: "fit",
                    style: { background: "Orange" }, html: "<h1>East Border!</h1>"
                },
                { title: "Border South", region: "south", height: 80, split: true, collapsible: true, minSize: 75, maxSize: 150,
                    style: { color: "Blue" }, html: "<h1>South Border!</h1>"
                }
              ]
    });
    //獲取對象
    addUrl('divUrl'); //添加Url鏈接
}

var ulData = [
   { name: "百度", url: "http://www.baidu.com" },
   { name: "搜狐", url: "http://www.sohu.com" },
   { name: "新浪", url: "http://www.sina.com" }
]
function addUrl(eleID) {
    var divUrl = Ext.get(eleID);
    var html = '<ul>';
    for (var i = 0; i < ulData.length; i++) {//遍歷Json添加數據
        //html += '<li><A href=' + ulData[i].url + ' >' + ulData[i].name + '</A></li>';//拼接語句
        html += String.format('<li><A href={0} onclick="{2}">{1}</A></li>', ulData[i].url, ulData[i].name, "alert('" + ulData[i].name + "')"); //格式化語句
    }
    html += '</ul>';
    divUrl.dom.innerHTML = html;
}

10.一個比較不錯的練習測試(其中,創建tabPanel的url指定的"Test.aspx",是加載Panel要指向的頁面)(你可以繼續加上自己喜歡的成份,繼續你的精彩添加)

//練習題，左邊點擊按鈕，右邊添加Panel和內容
function doPanel() {
    var viewPort = new Ext.Viewport({
        layout: 'border', style: { marginLeft: '3px', marginTop: '5px', marginRight: '3px' }, //border布局
        items:
                [
                { region: 'north', title: '歡迎大家來到廣聯達大學堂', height: 100, bodyStyle: { color: 'purple' }, //北部區域
                    html: '<h3>本節課程主要講解對於Panel面板的創建和使用以及對於工具欄控件的使用，祝大家學習愉快！</h3>'
                },
                { region: 'west', title: '創建控制區', width: 150, collapsible: true, split: true, //西部區域
                    items: [//定義Panel面板
                    new Ext.Panel({ border: false, layout: 'accordion', layoutConfig: { titleCollapse: true, animate: true, activeOnTop: false, fill: true }, //accordion布局
                        defaults: { bodyStyle: { background: 'orange', padding: '5px'} }, height: 470, activeItem: 0, style: { background: 'green' },
                        items: [
                                { title: '控制區1', html: '我是面板1', //添加、修改空Panel
                                    items: [
                                    { xtype: 'button', id: 'btnNew', text: '新建Panel', //新建空Panel
                                        handler: function () { alert('新建Panel'); taskAction('noBar', 'new'); }
                                    },
                                    { xtype: 'button', id: 'btnUpdate', text: '修改Panel', //修改空Panel
                                        handler: function () { alert('修改Panel'); taskAction('noBar', 'update'); }
                                    }]
                                },
                                { title: '控制區2', html: '我是面板2', //添加、修改有tbar的Panel
                                    items: [
                                    { xtype: 'button', id: 'btnNewTool', text: '新建PanelTool',  //新建ToolBarPanel
                                        handler: function () { alert('新建ToolBarPanel'); taskAction('toolBar', 'new') }
                                    },
                                    { xtype: 'button', id: 'btnUpdateTool', text: '修改PanelTool', //修改ToolBarPanel
                                        handler: function () { alert('修改ToolBarPanel'); taskAction('toolbar', 'update') }
                                    }]
                                },
                                { title: '控制區3', html: '我是面板3'}//備用控制區
                               ]
                    })
                    ]
                },
                { region: 'center', xtype: 'tabpanel', id: 'tabPanel', title: '面板的顯示', //中部區域
                    items: [
                        { title: '默認面板1', html: '<h1>這是創建的默認面板1！</h1>' }, //默認顯示面板, autoLoad: { url: 'Test.aspx'}
                        {title: '默認面板2', html: '<h1>這是創建的默認面板2！</h1>' }
                ]
                },
                { region: 'east', width: 150, title: '內容顯示區', html: '<h1>這是面板內容顯示區域！</h1>' }, //東部區域
                {region: 'south', height: 100, title: '友情鏈接', autoScroll: true, //南部區域
                html: '<h1 style="color:orange">這是友情鏈接顯示區域！</h1><div id="divComps"></div>'//南部區域添加公司信息
            }
                ]
    });
    compRegistered("divComps"); //底部友情鏈接添加
};

//Json數據
var urlInfos = [
        { compID: '1', compName: '百度', compUrl: 'http://www.baidu.com', compAddress: { city: '北京', postalCode: '100000', descript: '百度主要做搜索引擎的！'} },
          { compID: '2', compName: '搜狐', compUrl: 'http://www.sohu.com', compAddress: { city: '北京', postalCode: '110000', descript: '搜狐CEO：張朝陽！'} },
          { compID: '3', compName: '新浪', compUrl: 'http://www.sina.com', compAddress: { city: '北京', postalCode: '120000', descript: '新浪有微博，即新浪微博！'} },
          { compId: '4', compName: '阿里巴巴', compUrl: 'http://www.alibaba.com/', compAddress: { city: '杭州', postalCode: '130000', descript: '阿里巴巴與四十大盜'} }
        ]
function compRegistered(comps) {//添加注冊公司信息
    var compRegisters = Ext.get(comps);
    var html = '<ul>';
    for (var i = 0; i < urlInfos.length; i++) {//遍歷Json數據，拼接對應的數據
        html += String.format('<li>公司：<A href={0}>{1}</A>，公司詳情：城市:{2}；郵編:{3}；描述:{4}</li>', //格式化數據
            urlInfos[i].compUrl, urlInfos[i].compName, urlInfos[i].compAddress.city, urlInfos[i].compAddress.postalCode, urlInfos[i].compAddress.descript);
    }
    html += '</ul>';
    compRegisters.dom.innerHTML = html; //將html數據賦值
}

//添加TabPanel函數
function addPanel(type, tabPanel, tabTitle, tabUrl) {//參數：是否tbar,操作tabPanel對象,tabPanel標題,tabPanelUrl
    if (type == "noBar") {//NoBar
        tabPanel.add({ title: tabTitle, iconCls: 'tabs', closeable: true, closable: true, autoLoad: { url: tabUrl} }).show();
    } else {//toolBar
        tabPanel.add({ id: tabTitle, title: tabTitle, html: '測試新Tab:' + tabTitle, bodyStyle: { background: 'green' }, closable: true, //是否允許關閉
            tbar: [//添加工具欄
                new Ext.Toolbar.TextItem('工具欄：'),
                { xtype: 'tbfill' }, //填充所有空白
                {id: 'tbarAdd', text: '添加', handler: function () { alert('添加操作'); tabAddBtn(tabTitle) } }, //將當前Id傳入創建按鈕
                {id: 'tbarUpdate', text: '修改', handler: function () { alert('修改操作') } },
                { id: 'tbarDel', text: '刪除', handler: function () { alert('刪除操作') } }
                ]
        }).show();
    }
}

//修改TabPanel函數
function updatePanel(tabPanel, tabTitle, tabUrl) {//tabPanel容器對象,要修改的標題,tabPanel的url
    var tabItem = tabPanel.getActiveTab(); //獲取當前活動的tab
    if (tabItem) {
        tabItem.getUpdater().update(tabUrl); //更新數據,refresh
        tabItem.setTitle(tabTitle); //修改tabTitle
    } else {
        tabItem = addPanel(panelId, tabTitle, tabUrl);
    }
    tabPanel.setActiveItem(tabItem); //設置當前tab活動
}

var addCount = 0; //添加計數器
var updateCount = 0; //更新計數器
var taskAction = function (toolType, actionType) {//操作分配函數，參數：是否tbar,操作類型(new\update)
    var tabPanel = Ext.getCmp('tabPanel');
    if (actionType == 'new') {//新建操作
        if (toolType == "noBar") {//nobar:沒有工具欄tabr
            addPanel("noBar", tabPanel, 'New Tab' + (addCount++), 'Test.aspx');
        }
        else {//toolbar：有工具欄tbar
            addPanel("toolBar", tabPanel, 'New Tab' + (addCount++), 'Test.aspx');
        }
    }
    else {//update:修改操作
        updatePanel(tabPanel, 'Update Tab' + (updateCount++), 'Test.aspx');
    }
}
function tabAddBtn(tabId) {//根據當前Id,獲取對象動態添加按鈕
    //var tabItem = tabPanel.getActiveTab();//或根據當前活動tab
    var tabPanel = Ext.getCmp(tabId);
    tabPanel.add({
        xtype: 'button', text: 'AddNewButton', width: 150, handler: function () { alert('點我干什么！') }
    });
    tabPanel.doLayout(); //重新渲染
}

發現這篇文章整的有點多了，大家有需要的借着看吧！又忘了一點對於工具欄按鈕的匹配：(其實,在API文檔中有記錄在需要的時候,可以去查查,其API文檔相當好)

以下是所有工具欄可用按鈕名稱字符串 

字符串               中文名稱
-------------    ------------------
toggle            收縮/展開
close             關閉
minimize          最小化
maximize          最大化
restore           重置
gear              自適應
pin               固定
unpin             解除固定
right             向右
left              向左
up                向上
down              向下
refresh           刷新
minus             縮小
plus              放大
help              幫助
search            搜索
save              保存
print             打印