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文档相当好)
View Code
本文转自SanMaoSpace博客园博客，原文链接：http://www.cnblogs.com/SanMaoSpace/archive/2013/01/24/2875593.html，如需转载请自行联系原作者
