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',  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',  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",  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, 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',  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,
         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,  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',  120, emptyText: '请输入查询内容' },
                    { text: 'tbarSearch', handler: function () { alert(Ext.getCmp('txtContent').getValue()) } }
                    ]
                    },
                    { title: '面板2', html: '<h1>我是面板2</h1>',//面板2：bbar显示
                        bbar: [{ text: 'bbarAdd' }, { xtype: 'tbspacer',  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',  500, height: 300, renderTo: Ext.getBody(),
        style: " 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",  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",  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: '创建控制区',  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',  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',  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             打印