|
本篇講解三個(gè)工具欄控件。其中Ext.toolbar.Toolbar可以用來(lái)放置一些工具類操控按鈕和菜單，Ext.toolbar.Paging專門(mén)用來(lái)控制數(shù)據(jù)集的分頁(yè)展示，Ext.ux.statusbar.StatusBar用來(lái)展示當(dāng)前的狀態(tài)信息。
一、Ext.toolbar.Toolbar
工具欄控件可以被附加在面板、窗口等容器類控件中，可以在四個(gè)方位添加多個(gè)工具欄控件。我們演示多個(gè)Ext.toolbar.Toolbar控件，然后附加到面板的不同位置。
1.在工具欄上添加菜單、按鈕、搜索功能
我們這里借用上一篇所講到的listview控件作為數(shù)據(jù)展示，把listview放入一個(gè)面板控件中，然后把工具欄添加到面板頂部，并且在工具欄中實(shí)現(xiàn)數(shù)據(jù)集的服務(wù)端搜索的功能。
首先我們定義一個(gè)數(shù)據(jù)模型和Store：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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();
|
服務(wù)端的json輸出代碼：
[C# Mvc]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | public JsonResult Toolbar1Json(string keyword)
{
var rows = BasicData.Table.Take(10).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
});
if (!string.IsNullOrEmpty(keyword))
{
rows = rows.Where(x => x.IntData.ToString() == keyword || x.StringData.Contains(keyword) || x.TimeData.Contains(keyword));
}
var json = new
{
results = BasicData.Table.Count,
rows = rows
};
return Json(json, JsonRequestBehavior.AllowGet);
}
|
接著定義一個(gè)listView，來(lái)自上篇
現(xiàn)在我們要定義一個(gè)toolbar，在工具欄里面添加了工具按鈕、普通文字、分割線、和菜單，還實(shí)現(xiàn)了搜索的功能：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | var filed1 = new Ext.form.Field();
var tbar = Ext.create("Ext.Toolbar", {
items: ['文字', "-", {
xtype: "splitbutton",
text: "按鈕"
}, {
text: "菜單",
menu:
{
items: [
{
text: '選項(xiàng)1'
}, {
text: '選項(xiàng)2'
}, {
text: '選項(xiàng)3',
handler: function () {
Ext.Msg.alert("提示", "來(lái)自菜單的消息");
}
}
]
}
}, "->", "關(guān)鍵字：", filed1, {
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
]
});
|
注意這里，我們通過(guò)load store，把keyword關(guān)鍵字傳給了c#的action參數(shù)：
[Js]
1 2 3 4 5 6 | {
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
|
最后我們定義一個(gè)Panel，把listView和toolbar都添加到Panel上，注意，tbar表示了這個(gè)工具欄在上方。
[Js]
1 2 3 4 5 6 7 8 9 10 | var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具欄',
items: listView,
tbar: tbar
});
|
大功告成，我們來(lái)看看效果：
我們輸入關(guān)鍵字“6”后查看過(guò)濾效果：
2.溢出測(cè)試
如果工具欄上的item項(xiàng)目過(guò)多，而面板的長(zhǎng)度不夠那會(huì)怎么樣？我們需要設(shè)置 overflowHandler: 'Menu'，代碼如下：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var bbar = Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: ["溢出測(cè)試", "溢出測(cè)試", "溢出測(cè)試", "溢出測(cè)試", "溢出測(cè)試", "溢出測(cè)試", "溢出測(cè)試",
"溢出測(cè)試", "溢出測(cè)試",
{
xtype: "button",
text: "溢出按鈕",
handler: function () {
Ext.Msg.alert("提示", "工具欄按鈕被點(diǎn)擊");
}
}, { text: "溢出按鈕", xtype: "splitbutton"}]
});
|
預(yù)覽下效果：
3.在右側(cè)的工具欄
現(xiàn)在我們要實(shí)現(xiàn)放置在右側(cè)的工具欄，這次我們直接在面板的代碼里面寫(xiě),代碼如下：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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'
}
]
});
|
預(yù)覽下效果：
最后奉上完整的代碼：
[Js]
二、Ext.toolbar.Paging
1.基本的分頁(yè)工具欄控件
Ext.toolbar.Paging就是一個(gè)特殊的工具欄，它提供了數(shù)據(jù)集翻頁(yè)的功能，下面我們看看store的實(shí)現(xiàn)：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var store = Ext.create('Ext.data.Store', {
fields: ['IntData', 'StringData', 'TimeData'],
pageSize: 15,
proxy: {
type: 'ajax',
url: 'PagingToolbar1Json',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'results'
}
},
autoLoad: true
});
|
對(duì)應(yīng)的服務(wù)端mvc的代碼如下：
[C# Mvc]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public JsonResult PagingToolbar1Json(int start, int limit)
{
var json = new
{
results = BasicData.Table.Count,
rows = BasicData.Table.Skip(start).Take(limit).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
})
};
return Json(json, JsonRequestBehavior.AllowGet);
}
|
現(xiàn)在我們借用上篇的Ext.view.View控件，把它放置到一個(gè)面板中，面板的代碼如下：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var panel = Ext.create('Ext.Panel', {
renderTo: "div1",
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: 'fit',
title: '分頁(yè)控件用在View',
items: Ext.create('Ext.view.View', {
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
id: 'view1',
overItemCls: 'hover',
itemSelector: 'tr.data',
emptyText: '沒(méi)有數(shù)據(jù)',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
]
}),
bbar: Ext.create('Ext.toolbar.Paging', {
store: store,
displayInfo: true,
items: [
'-', {
text: '第10頁(yè)',
handler: function () {
store.loadPage(10);
}
}]
})
});
|
注意上述代碼，我們?cè)诜猪?yè)工具欄控件中加入了一個(gè)按鈕，當(dāng)單擊這個(gè)按鈕時(shí)，數(shù)據(jù)集自動(dòng)翻到第十頁(yè)。
最后我們看看展示效果：
2.擴(kuò)展后的翻頁(yè)控件
我們可以通過(guò)ux擴(kuò)展支持定義不同風(fēng)格的分頁(yè)控件，這效果就像三國(guó)殺擴(kuò)展包一樣，我們可以通過(guò)滾軸控件和進(jìn)度條控件去展示當(dāng)前處于分頁(yè)項(xiàng)的哪個(gè)位置。我們?cè)诜猪?yè)控件的配置部分添加如下代碼:
[Js]
1 | plugins: Ext.create('Ext.ux.SlidingPager', {})
|
展示效果：
1 | plugins: Ext.create('Ext.ux.ProgressBarPager', {})
|
展示效果：
完整的代碼：
[Js]
三、Ext.ux.statusbar.StatusBar
這個(gè)狀態(tài)欄控件也是ext的一個(gè)擴(kuò)展支持，不過(guò)它就好像軍爭(zhēng)包一樣，這次不是小小改進(jìn)，而是一個(gè)全新的控件。
首先定義一個(gè)函數(shù)，它在前2秒將狀態(tài)欄設(shè)置為繁忙狀態(tài)，2秒后恢復(fù)：
[Js]
1 2 3 4 5 6 7 8 9 10 11 12 | var loadFn = function (btn, statusBar) {
btn = Ext.getCmp(btn);
statusBar = Ext.getCmp(statusBar);
btn.disable();
statusBar.showBusy();
Ext.defer(function () {
statusBar.clearStatus({ useDefaults: true });
btn.enable();
}, 2000);
};
|
接著我們將要幾個(gè)按鈕到狀態(tài)欄，第一個(gè)設(shè)置狀態(tài)為錯(cuò)誤：
[Js]
1 2 3 4 5 6 7 8 | handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.setStatus({
text: '錯(cuò)誤!',
iconCls: 'x-status-error',
clear: true
});
}
|
第二個(gè)設(shè)置狀態(tài)為加載中：
[Js]
1 2 3 4 | handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.showBusy();
}
|
第三個(gè)為清除狀態(tài)：
[Js]
1 2 3 4 | handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.clearStatus();
}
|
展示效果，分別是加載、錯(cuò)誤、和清除狀態(tài)：
完整的代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
Ext.onReady(function () {
var loadFn = function (btn, statusBar) {
btn = Ext.getCmp(btn);
statusBar = Ext.getCmp(statusBar);
btn.disable();
statusBar.showBusy();
Ext.defer(function () {
statusBar.clearStatus({ useDefaults: true });
btn.enable();
}, 2000);
};
var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
title: '演示狀態(tài)欄',
items: [{ xtype: "button", text: "測(cè)試", id:"button1", handler: function (btn, statusBar) {
loadFn("button1", "statusbar1");
}
}],
bbar: Ext.create('Ext.ux.statusbar.StatusBar', {
id: 'statusbar1',
defaultText: '就緒',
text: '沒(méi)有任務(wù)',
iconCls: 'x-status-valid',
items: [
{
xtype: 'button',
text: '設(shè)置狀態(tài)',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.setStatus({
text: '錯(cuò)誤!',
iconCls: 'x-status-error',
clear: true
});
}
},
{
xtype: 'button',
text: '設(shè)置為加載狀態(tài)',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.showBusy();
}
},
{
xtype: 'button',
text: '清除狀態(tài)',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.clearStatus();
}
}
]
})
});
});
|
|
