现在我们要实现放置在右侧的工具栏,这次我们直接在面板的代码里面写,代码如下:
代码如下[Js]
var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: "fit",
title: "演示工具栏",
items: listView,
tbar: tbar,
bbar: bbar,
rbar: [{
iconCls: "add16",
tooltip: "按钮1"
},
"-",
{
iconCls: "add16",
tooltip: {
text: "按钮2",
anchor: "left"
}
}, {
iconCls: "add16"
}, {
iconCls: "add16"
},
"-",
{
iconCls: "add16"
}
]
});
预览下效果:
最后奉上完整的代码:
代码如下[Js]
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.define("Datas", {
extend: "Ext.data.Model",
fields: [
{ name: "IntData", type: "int" },
{ name: "StringData", type: "string" },
{ name: "TimeData", type: "date" }
],
proxy: {
type: "ajax",
url: "Toolbar1Json",
reader: {
type: "json",
root: "rows"
}
}
});
var store = new Ext.data.Store({
model: "Datas",
sortInfo: { field: "IntData", direction: "DESC" },
autoLoad: true
});
store.load();
var listView = Ext.create("Ext.ListView", {
store: store,
multiSelect: true,
emptyText: "当前没有数据展示",
reserveScrollOffset: true,
columns: [{
header: "IntData",
dataIndex: "IntData"
}, {
header: "StringData",
dataIndex: "StringData"
}, {
header: "TimeData",
dataIndex: "TimeData",
align: "right",
xtype: "datecolumn",
format: "m-d h:i a"
}]
});
var filed1 = new Ext.form.Field();
var tbar = Ext.create("Ext.Toolbar", {
items: ["文字", "-", {
xtype: "splitbutton",
text: "按钮"
}, {
text: "菜单",
menu:
{
items: [
{
text: "选项1"
}, {
text: "选项2"
}, {
text: "选项3",
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
}
}, "->", "关键字:", filed1, {
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
]
});
var bbar = Ext.create("Ext.toolbar.Toolbar", {
layout: {
overflowHandler: "Menu"
},
items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
"溢出测试", "溢出测试",
{
xtype: "button",
text: "溢出按钮",
handler: function () {
Ext.Msg.alert("提示", "工具栏按钮被点击");
}
}, { text: "溢出按钮", xtype: "splitbutton"}]
});
var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: "fit",
title: "演示工具栏",
items: listView,
tbar: tbar,
bbar: bbar,
rbar: [{
iconCls: "add16",
tooltip: "按钮1"
},
"-",
{
iconCls: "add16",
tooltip: {
text: "按钮2",
anchor: "left"
}
}, {
iconCls: "add16"
}, {
iconCls: "add16"
},
"-",
{
iconCls: "add16"
}
]
});
});
http://m.bbyears.com/wangyezhizuo/33094.html
推荐访问:extjs4api