(1) Panel
面板Panel 是ExtJS 控件的基础,很高级控件都是在面板的基础上扩展的,还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。
面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。
面板的类名为Ext.Panel,其xtype 为panel,下面的代码可以显示出面板的各个组成部分:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
一般情况下,顶部工具栏或底部工具栏只需要一个,而面板中一般也很少直接包含按钮,一般会把面板上的按钮直接放到工具栏上面。比如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,ExtJS!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
});
(2) 工具栏
面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext 中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,ExtJS Panel !</h1>',
tools:[{
id:"save"},
{id:"help",
handler:function(){Ext.Msg.alert('help','please help me!');}
},
{id:"close"}],
tbar:[{pressed:true,text:'刷新'}]
});
});
点击help按钮会执行handler中的函数,显示一个弹出对话框,而点击其它的按钮不会有任何行为产生,因为没有定义他们的heanlder。除了在面板头部加入这些已经定义好的工具栏选择按钮以外,还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"mydiv",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,ExtJS Panel/Toolbar !</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
]
});
});
(3) 选项面板的TabPanel
在前面的示例中,为了显示一个面板,我们需要在页面上添加一个,然后把Ext 控件渲染到这个div 上。VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});
Viewport 不需要再指定renderTo,而我们也看到Viewport 确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改变。
Viewport 主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等,当然在需要的时候其它布局也会常用。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north",
height:50,
html:"<h1>网站后台管理系统!</h1>"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1"},{title:"面板2"}]
}]
});
});
分享到:
相关推荐
宣布推出具有长久使用寿命、温度系数低至 ±150 ppm/°C 且具有 9.6mm 小型尺寸的新型低成本面板电位计。 标准低成本面板电位计的寿命为 50,000 个周期,而 Vishay 的 P10L 具有长达10倍的 500,000 个周期的...
利用OpenCV 计算机视觉库,通过图像/ 视频感知设备对手持式和面板式数字仪表的显示区域进行图像采集,在对图像几何校正、自适应阈值二值化等预处理后,使用霍夫变换校正倾斜字体,随后对图像先垂直再水平分割,进行...
第四章 面板及使用说明 6 4.1 前侧面板图以及灯定义 6 4.2 后侧面板图及按钮定义 7 第五章 用户配置使用说明 8 5.1 安装 8 5.1.1 硬件安装 8 5.1.2 光盘使用介绍 10 5.2开启e家终端电源 22 5.3 无线连接使用步骤 22 ...
上一篇文章,我们在wordpress后台文章编辑页面添加了自定义面板,并且在自定义面板中可以输入关键词和描述信息,但是我们仅仅使用了一个textarea文本域表单,这在实际应用中是远远不够的,实际应用我们可能需要...
电子面板使用Electron的面板应用程序正在安装npm install electro-panel 用法示例 var electro - panel = require ( 'electro-panel' ) ;// Do whatever you want with 'electro-panel'!执照MIT许可证(MIT) 版权...
交流负载与我们同住!因为它们在我们周围无处不在,并且至少为家用电器提供了电源。许多类型的工业设备也使用单相220V-AC供电。...面板上有两个按钮和一个七段显示器,使用户可以平稳地调节输出电压。
使用西门子S7-200可编程控制器和I/O拓展模块,设计了电梯的控制系统,用与或的梯形图,设计包括电梯的内外面板、电梯的开关门运行、防夹手开关门、开关门按钮、电梯上下行控制、电梯的运行方向指示和电梯所在层数...
使用自定义视图控制面板 203 显示自定义视图控制面板 204 还原到常规控制面板视图 205 使用自定义视图控制面板 205 排列自定义视图控制面板 205 加载背景图像 206 选择以前上载的背景图像 206 验证背景图像 207 删除...
mpic是一款强大的图床工具,支持多种方式长传图片,操作简单,利用MPic客户端自动生成MarkDown链接,对于经常写博客的朋友来说,非常方便,快来下载使用吧。 mpic图床神器怎么设置账号 1、打开MPic,点击...
Grafana的TrackMap面板的面板,将GPS点可视化为交互式地图... 从源头建造要使用该插件的未发布版本或进行开发,您将需要从源代码手动构建它。 要构建,请安装npm ,签出master分支(或您要构建的提交),然后在插件目录
使用AIX安装CD安装文件 37 修改电源管理 38 Netscape安装和配置 38 安装HACMP/ES软件 38 安装最新的AIX和HACMP补丁 38 SSA微码升级 39 设置主机名 39 为所有网卡绑定boot或standby的IP地址 39 创建VG、LV和FS 40 ...
1、控制面板介绍 2、洗衣程序介绍 3、显示屏介绍 六、其他功能 1、其他功能介绍 七、常见故障分析 1、常见故障分析及解决办法· 2、显示代码解析 .八、规格参数 1、规格参数表 九、产品包修说明 1、产品包修说明 2、...
七、游戏文件放进ROMS目录里了,为什么还是没有显示游戏? 八、游戏进入后怎么操作呀? ①通用/默认按键的操作步骤 ②当前游戏按键的操作步骤 ③组合键的操作步骤 ④连射功能键的操作步骤 ⒈普通射击游戏的连...
七、 进度条 18 1. 先创建一个简单的进度条元素; 18 2. lay-showPercent 可以指定是否显示比例,比如也可以用分数; 18 3. layui-progress-big 样式可以设置大号进度条; 19 相关样式 20 相关属性 20 八、 面板 22 ...
2.准备(事前说明一运转的方法我期配烧的方法和时序围、参欢的详情、的面板的使用方法。) 3.连接(连接一输入输出信是说明各控制模式的框图,与上位控制器的连接、VO设定。) 4.设定(参数详情和试运转) 5.调整...
斑马XIII系列打印机使用手册 一、打印机电源 二、打印机结构 三、安装标签和色带的注意事项 四、面板功能说明 五、Zebra Xi II打印机的简单调整和参数设置说明 六、打印机的日常维护 七、常见故障及其处理
七、如何通过vsto设置和使用style 9 1、关于style的几个概念 9 2、如何获取style 9 3、如何应用style 9 八、如何打开和关闭文档结构图 11 十、表格操作 11 1、便历所有单元格 11 2、修改边框式样、合并单元格 11 ...
在单二极管模型周围,使用分析方程,迭代方法和具有多目标函数的优化方法来执行七个模型,以获取内部参数。 所提出的实验模型是通过将迭代方法的STC处得到的解与铭牌的值结合使用,并使用带有实验系数的开路电压...
介绍:螺仪部分的驱动,实现计步算法,温湿度的显示以及对步数算法的实现...使用1.3寸TFP LED全彩显示屏,面板大小为26.16*29.22,使用接插样式的引脚封装。 TypeC接口。 资源包含:程序源码、原理图、PCB、各模块资料
第二十七章 使用UART的共享时钟调度器 第二十八章 使用CAN的共享时钟调度器 第二十九章 多处理器系统的设计 第七篇 监视与控制组件 第三十章 脉冲频率检测 第三十一章 脉冲频率调制 第三十二章 模拟-数字转换器的...