Ext.Toolbar是Ext提供的简单的工具栏组件,在其中可以放置各种工具栏元素,比如按钮,文字和菜单组件,下面我们通过一个例子来大致了解下Toolbar的使用
<script type="text/javascript">
Ext.onReady(function(){
var newT = new Ext.Toolbar({
width:300,
});
newT.addButton([
{
text:'我是按钮',
handler:onButtonClick
}
]);
function onButtonClick(btn){
alert(btn.text);
}
newT.render(Ext.getBody());
});
</script>
显示为:
上面的代码创建了一个很简单的工具栏,上面只有一个按钮名为"我是按钮"。
这里遇到了一个小小的问题,就是:必须先追加控件,再追加布局上。意思就是:newT.render(Ext.getBody())这段追加布局代码必须要等控件追加结束后再给予显示,如果把这段代码迁移,工具栏将无法正常显示,而只是显示一条细小的横线而已。
下面我们来写一个比较复杂的ToolBar:
<script type="text/javascript">
Ext.onReady(function(){
var newT = new Ext.Toolbar({
width:300,
});
newT.addButton([
{
text:'我是按钮',
handler:onButtonClick
}
]);
function onButtonClick(btn){
alert(btn.text);
}
newT.addSeparator();
newT.addField(new Ext.form.TextField({width:50}));
newT.addFill();
newT.addSeparator();
newT.addText('静态文本');
newT.render(Ext.getBody());
});
</script>
显示为:
这样就可以丰富我们的工具栏了!当然,我们也可以调用一次方法加入不同的元素,这就是add方法:
<script type="text/javascript">
Ext.onReady(function(){
var newT = new Ext.Toolbar({
width:300,
});
newT.add(
{text:'按钮1'},
{text:'按钮2'},
'-',
new Ext.form.TextField({
width:50
}),
'你好'
);
newT.render(Ext.getBody());
});
</script>
显示为:
最后,我们来看一下ToolBar提供的一些主要方法和常用元素:
常用元素有:
Ext.ToolBar.Button
Ext.ToolBar.Fill
Ext.ToolBar.Item
Ext.ToolBar.Separator
Ext.ToolBar.SplitButton
Ext.ToolBar.TextItem
Ext.ToolBar的主要使用方法就到这里了,若需对他更进一步的了解,多看看API多亲自操练一下才是王道。
- 大小: 1.1 KB
- 大小: 1.5 KB
- 大小: 1.2 KB
- 大小: 19.9 KB
分享到:
相关推荐
9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4 记录和恢复面板属性:ext.util.memento / 439 9.3.5 面板常用的配置项、方法和事件 / 439 9.4 布局 / 441 9.4.1 布局概述 / 441 9.4.2 ...
一、基础篇 1、Ext JS下载及配置 2、基本功能 2.1、Ext.MessageBox消息框 2.2、Ext.window.MessageBox 3、工具栏和菜单栏 3.1、Ext.toolbar.Toolbar工具栏 3.2、Ext.menu.Menu菜单栏 4、表单
3.4.1 认识Ext.toolbar.Toolbar 3.4.2 只包含按钮的简单工具栏 3.4.3 包含多种元素的复杂工具栏 3.4.4 启用和禁用工具栏 3.4.5 认识Ext.menu.Menu菜单 3.4.6 最简单的菜单栏 3.4.7 创建二级或多级菜单 3.4.8 ...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件。下面是一个例子: 代码如下: [removed] Ext.onReady(function() { var tb = new Ext....
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...
Yii调试工具栏 Yii Debug Toolbar是一组可配置的面板,显示有关当前请求/响应的各种调试信息,单击该工具时,将显示有关面板内容的更多详细信息。 它是移植到PHP著名的。 当前,以下面板已编写并且正在运行: ...
18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 ...
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...