Toolbar组件
创建工具栏
Toolbar类是一种子组件,它不能独立存在,需要依附在其它组件上面。很多容器组件都具备tbar(顶部工具栏)、bbar(底部工具栏)的配置,所以可以像下面那样使用它。
tbar: {
id: "tool",
width: 200,
height: 30,
items: [
{ text: "新 增", itemId: "btn1", style: "background:none;border:none;",iconCls: "btnIco", handler: function () { alert() } }, //默认是按钮
{ xtype: 'tbseparator' }, //分隔符
{ xtype: 'tbspacer', width: 10 }, //指示物件的间距
{ xtype: "text", text: "纯文本" },
{ xtype: 'tbfill' }, //指示出现在tbfill之后的物件右对齐
{ xtype: "textfield",fieldLabel:"查询",labelWidth:50 }, //可配置为表单组件
]
}
id: "tool",
width: 200,
height: 30,
items: [
{ text: "新 增", itemId: "btn1", style: "background:none;border:none;",iconCls: "btnIco", handler: function () { alert() } }, //默认是按钮
{ xtype: 'tbseparator' }, //分隔符
{ xtype: 'tbspacer', width: 10 }, //指示物件的间距
{ xtype: "text", text: "纯文本" },
{ xtype: 'tbfill' }, //指示出现在tbfill之后的物件右对齐
{ xtype: "textfield",fieldLabel:"查询",labelWidth:50 }, //可配置为表单组件
]
}
设置按钮内的文字和按钮内的图标
/*按钮文字*/
.x-btn-inner {
font-family: Arial !important;
color: white !important;
}
/*按钮a标签*/
.x-btn {
text-decoration: none !important;
}
/*按钮内图标*/
.btnIco {
background: url(../../Img/Ico/login.png);
margin-left:78px;
}
.x-btn-inner {
font-family: Arial !important;
color: white !important;
}
/*按钮a标签*/
.x-btn {
text-decoration: none !important;
}
/*按钮内图标*/
.btnIco {
background: url(../../Img/Ico/login.png);
margin-left:78px;
}
创建菜单
菜单组件可浮动在鼠标的轨迹上,也可以附加在工具栏上。
//右键点击grid时创建右键菜单
Ext.create("Ext.grid.Panel", {
//……
listeners: {
itemcontextmenu: function (view, record, item, index, e) {
e.preventDefault();
Ext.create("Ext.menu.Menu", {
id: "contextmenu",
items: [
{
text: "全选",
handler: function () {
}
},
{
text: "反选",
hanlder: function () {
}
}
],
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
Ext.getCmp("contextmenu").showAt(e.getXY()); //显示在鼠标右键点击处
}
}
});
Ext.create("Ext.grid.Panel", {
//……
listeners: {
itemcontextmenu: function (view, record, item, index, e) {
e.preventDefault();
Ext.create("Ext.menu.Menu", {
id: "contextmenu",
items: [
{
text: "全选",
handler: function () {
}
},
{
text: "反选",
hanlder: function () {
}
}
],
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
Ext.getCmp("contextmenu").showAt(e.getXY()); //显示在鼠标右键点击处
}
}
});
tbar: {
id: "tool",
width: 200,
height: 30,
items: [
{
type: "button",
text: "文 件",
itemId: "btn1",
style: "background:none;border:none;text-decoration:none;",
menu: {
items: [
{ text: '复制', hanler: function () {/*点击菜单时触发*/ },deactivate:function()(menuSelf){/*菜单消失后触发*/} },
{ text: '剪切' },
{ text: '撤销' }
]
}
}
]
}
id: "tool",
width: 200,
height: 30,
items: [
{
type: "button",
text: "文 件",
itemId: "btn1",
style: "background:none;border:none;text-decoration:none;",
menu: {
items: [
{ text: '复制', hanler: function () {/*点击菜单时触发*/ },deactivate:function()(menuSelf){/*菜单消失后触发*/} },
{ text: '剪切' },
{ text: '撤销' }
]
}
}
]
}
创建按钮
Ext.create('Ext.Button', {
text: 'OK',
style: "background:red;border:none;margin:10px 0;", icon: "../img/ico/expand-down.png",
renderTo: "bbtn",
handler: function () { }
});
text: 'OK',
style: "background:red;border:none;margin:10px 0;", icon: "../img/ico/expand-down.png",
renderTo: "bbtn",
handler: function () { }
});
{
xtype: "button",
text: "选择全部",
style: "margin-right:10px;",
handler: function () {
//获得按钮的文字
if (this.getText() == "选择全部") {
//设置按钮的文字
this.setText("全部取消");
}
else {
this.setText("选择全部");
}
}
}
xtype: "button",
text: "选择全部",
style: "margin-right:10px;",
handler: function () {
//获得按钮的文字
if (this.getText() == "选择全部") {
//设置按钮的文字
this.setText("全部取消");
}
else {
this.setText("选择全部");
}
}
}