Ext Js简单面板及工具栏的创建使用

摘要:
面板是一个相对基本的组件。许多组件都是根据面板封装和创建的。面板可以理解为一个容器,其中可以存储更多的组件,以使页面更美观和更实用',工具:[//只需要指定要显示的id。还有一些其他工具将在文章末尾描述:{id:'save'},{id:'help',handler:function(){Ext.Msg.alert('help','ThisInfo!');}},{id:'colse',handler:function(){Ext.Msg.alert('信息提示','这是一个关闭操作!');}}],tbar:〔{text:“test”,handler:function(){alert;}}〕});}3.要创建Ext.Toolbar,请使用函数testPanel4{vartestPanel=newExt.Panel({title:'TestSimplePanel4',500,height:200,renderTo:divId,html:'YouWillGetMoreInfoFromTheOpenSource!',tbar:[newExt.Toolbar.TextItem,{text:“Add”},{xtype:“tbfill”}、{xtype:”tbseparator“},{text:“保存”});}4.为了在ViewPort中创建面板,使用functiontestViewPort(){varviewPort=newExt.Viewport({enableTabScroll:true,layout:“fit”,//Viewport不需要指定渲染区域。默认情况下,整个浏览器项都被选中:[{title:“PanelOne”,html:“ThisPanelOne!”,bbar:[{id:“btnOne”,text:“ButtonOne”,handler:function(){alert},{id:”btnOne“wo”,text:”ButtonTwo“,handler:function}]}]});} 5.为了在ViewportfunctiontestVPBorder()中显示边框布局面板的效果,{varviewPort=newExt.Viewport({enableTabScroll:true,layout:“Border”,items:[{title:“ViewPortTitleNorth”,region:“north”,height:100,html:“ThissTopTitle!

面板是比较基础的组件,很多的组件都是在Panel的基础上封装、创建的,可以把面板理解为一个容器,可以存放一些更多的组件在里面让页面更好看、功能更完善。
1.对于Panel中的tbar\bbar\buttons的创建使用(其中和下文中的divId即为页面中一个div标签的id)

functiontestPanel1(divId) {
    var testPanel = newExt.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的创建使用

functiontestPanel3(divId) {
    var testPanel = newExt.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的创建使用

functiontestPanel4(divId) {
    var testPanle = newExt.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的创建使用

functiontestViewPort() {
    var viewPort = newExt.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布局面板显示的效果

functiontestVPBorder() {
    var viewPort = newExt.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的创建使用

functionGSample() {
    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的创建使用

functionTT() {
    var win = newExt.Window({
        title: 'Window Title', height: 300,  450,
        items: [
                newExt.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的使用

functionextendPanel() {
    var testPanelStyle = newExt.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的创建和使用

functionextendViewPort() {
    var viewPortBorder = newExt.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   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"}
]
functionaddUrl(eleID) {
    var divUrl =Ext.get(eleID);
    var html = '<ul>';
    for (var i = 0; i < ulData.length; i++) {//遍历Json添加数据
        //html += '<li><A href='http://t.zoukankan.com/ + 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和内容
functiondoPanel() {
    var viewPort = newExt.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文档相当好)

Ext Js简单面板及工具栏的创建使用第1张Ext Js简单面板及工具栏的创建使用第2张View Code
以下是所有工具栏可用按钮名称字符串 

字符串               中文名称
-------------    ------------------toggle            收缩/展开
close             关闭
minimize          最小化
maximize          最大化
restore           重置
gear              自适应
pin               固定
unpin             解除固定
right             向右
left              向左
up                向上
down              向下
refresh           刷新
minus             缩小
plus              放大
help              帮助
search            搜索
save              保存
print             打印

免责声明:文章转载自《Ext Js简单面板及工具栏的创建使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇总结:String类型与Int类型的转换【实现插入操作主键自增】Android 中 Environment.getExternalStorageDirectory()无效下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js 获取地址第1个斜杠后的内容或地址前一部分

var value = "https://www.baidu.com/20210922/95b22ab5034b2d0f.jpg";const str = value.split("https://"); //https://进行分割, const index = str[1].indexOf("/")+1; //indexOf 获取第一个斜杠的索引,co...

js批量下载文件

​关于兼容性问题:  <a href="http://t.zoukankan.com/xxx.docx" target='_blank'></a>  下载文件时,这种写法是没有兼容性问题;但是下载图片时,IE 上会出现当前页面直接打开图片的问题,即便是加了 target='_blank'。单个文件批量下载方法一:H5 <a&g...

前端知识 — HTML内容、CSS基础

前端1、前端是做什么的 2、我们为什么要学前端? 3、前端都有哪些内容? 1、HTML 2、CSS 3、JavaScript 4、jQuery和Bootstrap Web开发本质: 1、浏览器输入网址回车都发生了什么? 1、浏览器给服务端发送了一个消息 2、服务端拿到消息 3、服务端返回消息 4、浏览器展示页面 importsocket sk =sock...

js实现代彩色文字的下落

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>闪烁</title></head><style> *{margin:0}/* 解决兼容性问题   ...

【转】百度统计js被劫持用来DDOS Github

原文链接:http://drops.wooyun.org/papers/5398 今天中午刷着全国最大的信息安全从业人员同性交友社区zone.wooyun.org的时候,忽然浏览器每隔2秒就不断的弹窗: malicious javascript detected on this domain 我第一反应就是不知道哪个调皮的基友又把zone给XSS了,...

js对象中什么是可枚举性(enumerable)?

说到枚举,可能很多人都会想到枚举类型,但在javascript对象中有一个属性为可枚举性,他是什么呢? 概念 可枚举性(enumerable)用来控制所描述的属性,是否将被包括在for...in循环之中。具体来说,如果一个属性的enumerable为false,下面三个操作不会取到该属性。* for..in循环* Object.keys方法* JSON.s...