Toolbar
/*
onReady文档加载完成之后执行
第一个参数是必须的,表示要执行的函数或匿名函数,
第二参数表示函数的作用域,
第三个参数表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可
*/
Ext.onReady(function () {
setToolBars();
});
var setToolBars = function () {
var addedItems = [];
var toolbar = Ext.create("Ext.toolbar.Toolbar", {
renderTo: "toolbar",
width: 800,
margin: "10px",
items: [
{
// 默认类型
xtype: "button",
text: "添加按钮",
handler: function () {
var text = $("input[name=\"buttonName\"]").val();
if (text) {
addedItems.push(toolbar.add({
text: text
}));
} else {
alert("请输入新增按钮名称");
}
}
},
"-" // 垂直分割符号 等同于 { xtype: "tbseparator" }
,
{
xtype: 'textfield',
name: 'buttonName',
emptyText: '输入新增按钮名称'
},
"-"
,
{
// 分割按钮
xtype: "splitbutton",
text: "分割按钮"
},
{
text: "禁用所有项",
scope: this,
name: "disableBtn",
disabled: false,
handler: function () {
toolbar.disable();
}
},
{
text: "启用所有项",
scope: this,
name: "disableBtn",
disabled: true,
handler: function () {
toolbar.enable();
}
},
"->" // 右对齐容器,类似右对齐输入的文本框 等同于 { xtype: "tbfill" }
,
{
text: "删除上一个新增项",
handler: function () {
toolbar.remove(addedItems.pop());
}
}
]
});
}
Tab
var tab;
Ext.onReady(function () {
setTab();
});
function setTab() {
tab = Ext.create("Ext.tab.Panel", {
renderTo: Ext.getBody(),
// title: "标题居中",
width: 600,
height: 400,
// titleAlign: "center", // 标题对其样式 left right center
tabPosition: "left", // 标签条的位置 top left right bottom
tabRotation: 0, // 标签条的旋转角度 default 0 1 2 对应 default none 90deg 270deg
defaults: {
iconAlign: "top", // icon对其方式 top left right bottom
textAlign: "center", // 文本对其样式 left right center
bodyPadding: 15,
scrollable: true, // 允许滚动
closable: true // 允许关闭
},
tabBar: {
layout: {
pack: "center"
}
},
items: [{
title: "Home",
glyph: "xf015@FontAwesome",
html: "首页"
}, {
title: "Users",
glyph: "xf007@FontAwesome",
html: "用户"
}, {
title: "Groups",
glyph: "xf0c0@FontAwesome",
html: "群组"
}, {
title: "Settings",
glyph: "xf013@FontAwesome",
html: "设置"
// 异步加载其他页面
// loader: {
// url: 'resources/data/tab/ajax1.htm',
// contentType: 'html',
// loadMask: true
// }
}]
});
}