面板是比较基础的组件，很多的组件都是在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({//创建ComboBoxstore: new Ext.data.ArrayStore({//数据ArrayStoreautoDestroy: true, //是否随Store的销毁一起销毁fields: ['userID', 'Name'], //字段data: [['userID1', '李明'], ['userID2', '李白']]//数据
        }),displayField: 'Name',typeAhead: true, //输入内容延迟自动匹配mode: 'local',   //数据本地forceSelection: true, //单选triggerAction: 'all', //触发点击 查询allemptyText: '请选择一个名字......',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} οnclick="{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', //新建空Panelhandler: function () { alert('新建Panel'); taskAction('noBar', 'new'); }},{ xtype: 'button', id: 'btnUpdate', text: '修改Panel', //修改空Panelhandler: function () { alert('修改Panel'); taskAction('noBar', 'update'); }}]},{ title: '控制区2', html: '我是面板2', //添加、修改有tbar的Panel
                                    items: [{ xtype: 'button', id: 'btnNewTool', text: '新建PanelTool',  //新建ToolBarPanelhandler: function () { alert('新建ToolBarPanel'); taskAction('toolBar', 'new') }},{ xtype: 'button', id: 'btnUpdateTool', text: '修改PanelTool', //修改ToolBarPanelhandler: 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标题,tabPanelUrlif (type == "noBar") {//NoBartabPanel.add({ title: tabTitle, iconCls: 'tabs', closeable: true, closable: true, autoLoad: { url: tabUrl} }).show();} else {//toolBartabPanel.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的urlvar tabItem = tabPanel.getActiveTab(); //获取当前活动的tabif (tabItem) {tabItem.getUpdater().update(tabUrl); //更新数据,refreshtabItem.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:没有工具栏tabraddPanel("noBar", tabPanel, 'New Tab' + (addCount++), 'Test.aspx');}else {//toolbar：有工具栏tbaraddPanel("toolBar", tabPanel, 'New Tab' + (addCount++), 'Test.aspx');}}else {//update:修改操作updatePanel(tabPanel, 'Update Tab' + (updateCount++), 'Test.aspx');}
}
function tabAddBtn(tabId) {//根据当前Id,获取对象动态添加按钮//var tabItem = tabPanel.getActiveTab();//或根据当前活动tabvar tabPanel = Ext.getCmp(tabId);tabPanel.add({xtype: 'button', text: 'AddNewButton', width: 150, handler: function () { alert('点我干什么！') }});tabPanel.doLayout(); //重新渲染
}

发现这篇文章整的有点多了，大家有需要的借着看吧！又忘了一点对于工具栏按钮的匹配：(其实,在API文档中有记录在需要的时候,可以去查查,其API文档相当好)

View Code

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

转载于:https://www.cnblogs.com/SanMaoSpace/archive/2013/01/24/2875593.html

Ext Js简单面板及工具栏的创建使用相关推荐

  1. 《Ext JS 6.2实战》节选——使用Sencha Cmd创建应用程序

    如果对Sencha Cmd不熟悉或没有了解过的,一定会很诧异为什么要用这个东西来创建应用程序,使用它又有什么好处呢?本章将会解答这些疑问,并介绍如何使用它来创建应用程序,以及应用程序创建后后如何开始进 ...

  2. Sencha Cmd创建Ext JS示例项目

    Sencha提供了免费的Cmd工具,可以用来创建Ext JS项目并提供了一些便利的功能. Sencha也在官方文档中提供了一个示例来演示如何创建一个Sample Login App. 本文就介绍一下这 ...

  3. 【翻译】Ext JS 6.6.0的新东西

    原文:<What's New in Ext JS 6.6.0> 简介 Sencha Ext JS 6.6已经支持NPM包和开放工具.Ext JS 6.6现在可以通过NPM包让开发人员使用已 ...

  4. Ext JS 4倒计时：开发者预览版

    作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版 发布了.Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架.从生成HTML代码到类 ...

  5. 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目

    打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择"ASP.NET MVC 3 Web应用程序",将项目名称修改为 ...

  6. 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（1）...

    应用程序的基本框架已经搭建好了,现在要做的是完成一个个的功能模块.先从简单做起,完成用户管理模块,该模块主要功能是使用一个Grid显示用户信息,并使用RowEditing进行用户的编辑.添加操作.Gr ...

  7. 【翻译】如何创建Ext JS暗黑主题之一

    原文:How to Create a Dark Ext JS Theme– Part 1 概述 我是不是都要演示我的Spotifinder Ext JS应用程序.它是一个很酷的应用程序,可连接到Las ...

  8. 【翻译】在Ext JS中创建特定主题的重写

    Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类.这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为.在本文,将展示 ...

  9. 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试...

    现在可以对登录窗口进行调试了. 打开系统的首页页面文件,Views\Home目录下的Index.cshtml文件.要动态加载登录窗口,需要先设置好加载路径,因而在onReady函数上加入以下代码: E ...

最新文章

  1. 洛谷1216 数字三角形
  2. 当我们拿到数据进行建模时，如何选择更合适的算法？
  3. 负载均衡算法-处理能力均衡
  4. java开发用amd处理器_HBase1.x实战：协处理器Java开发实例--ObserverCoprocessor
  5. django mysql save_python，django，向mysql更新数据时save()报错不能用
  6. JVM实战与原理---Class文件结构
  7. PHP下用正则表达式分割preg_split、替换reg_replace、匹配preg_match_all等出现乱码的解决方法...
  8. Vs Code 配置C/C++ 开发环境
  9. kv存储对抗关系型数据库
  10. 闲鱼账号被封怎么办？解封看这里！
  11. Guava入门~Lists
  12. 博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕
  13. vue 上传图像 php处理,通过 Laravel + Vue 实现文件上传功能
  14. 双十一数码产品哪些值得买？双十一好物产品分享
  15. NYoj 239 ：月老的难题（二分图最大匹配）
  16. 共享单车借力互联网保险，二者会擦出怎样的火花？
  17. oracle12c密码文件,【转】Oracle 12c 关于密码文件(password)的几个新特性
  18. 的c语言编程函数题,C语言编程题及答案Word版
  19. 转载好文 php读取大文件
  20. antd 表格分页功能

热门文章

  1. 互联互通新里程，数字城轨助力城市繁荣！
  2. 基于Python的租房数据分析与展示系统的设计和实现
  3. 微信小程序-3D地图场景+定位导航-法院3D室内导航系统-为群众提供诉讼全流程导航服务
  4. ABT 链节点五步速成法 | ArcBlock 博客
  5. 读书笔记001：《过得刚好》郭德纲著 摘录
  6. 2020测开面经（字节，阿里，腾讯）
  7. python导入txt时wrongformat_python 问题记录
  8. Qt5.6 编译后在 xp 系统下运行
  9. 使用xgboost以及lgbm
  10. jpg转pdf在线转换方法速成