[轉載]ExtJs4 筆記（12） Ext.toolbar.Toolbar 工具欄、Ext.toolbar.Paging 分頁欄、Ext.ux.statusbar.StatusBar 狀態欄
做者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸做者與博客園共有。轉載時須註明本文的詳細連接，不然做者將保留追究其法律責任。javascript
本篇講解三個工具欄控件。其中Ext.toolbar.Toolbar能夠用來放置一些工具類操控按鈕和菜單，Ext.toolbar.Paging專門用來控制數據集的分頁展現，Ext.ux.statusbar.StatusBar用來展現當前的狀態信息。html
1、Ext.toolbar.Toolbar
工具欄控件能夠被附加在面板、窗口等容器類控件中，能夠在四個方位添加多個工具欄控件。咱們演示多個Ext.toolbar.Toolbar控件，而後附加到面板的不一樣位置。java
1.在工具欄上添加菜單、按鈕、搜索功能
咱們這裏借用上一篇所講到的listview控件做爲數據展現，把listview放入一個面板控件中，而後把工具欄添加到面板頂部，而且在工具欄中實現數據集的服務端搜索的功能。ajax
首先咱們定義一個數據模型和Store：json
[Js]c#
|
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();
|
服務端的json輸出代碼：mvc
[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);
}
|
接着定義一個listView，來自上篇工具
如今咱們要定義一個toolbar，在工具欄裏面添加了工具按鈕、普通文字、分割線、和菜單，還實現了搜索的功能：測試
[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:
'選項1'
}, {
text:
'選項2'
}, {
text:
'選項3'
,
handler:
function
() {
Ext.Msg.alert(
"提示"
,
"來自菜單的消息"
);
}
}
]
}
},
"->"
,
"關鍵字："
, filed1, {
text:
"搜索"
,
handler:
function
() {
store.load({ params: { keyword: filed1.getValue()} });
}
}
]
});
|
注意這裏，咱們經過load store，把keyword關鍵字傳給了c#的action參數：
[Js]
|
1
2
3
4
5
6
|
{
text:
"搜索"
,
handler:
function
() {
store.load({ params: { keyword: filed1.getValue()} });
}
}
|
最後咱們定義一個Panel，把listView和toolbar都添加到Panel上，注意，tbar表示了這個工具欄在上方。
[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
});
|
大功告成，咱們來看看效果：
咱們輸入關鍵字「6」後查看過濾效果：
2.溢出測試
若是工具欄上的item項目過多，而面板的長度不夠那會怎麼樣？咱們須要設置 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: [
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
"溢出測試"
,
{
xtype:
"button"
,
text:
"溢出按鈕"
,
handler:
function
() {
Ext.Msg.alert(
"提示"
,
"工具欄按鈕被點擊"
);
}
}, { text:
"溢出按鈕"
, xtype:
"splitbutton"
}]
});
|
預覽下效果：
3.在右側的工具欄
如今咱們要實現放置在右側的工具欄，此次咱們直接在面板的代碼裏面寫,代碼以下：
[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'
}
]
});
|
預覽下效果：
最後奉上完整的代碼：
[Js]
2、Ext.toolbar.Paging
1.基本的分頁工具欄控件
Ext.toolbar.Paging就是一個特殊的工具欄，它提供了數據集翻頁的功能，下面咱們看看store的實現：
[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
});
|
對應的服務端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);
}
|
如今咱們借用上篇的Ext.view.View控件，把它放置到一個面板中，面板的代碼以下：
[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:
'分頁控件用在View'
,
items: Ext.create(
'Ext.view.View'
, {
store: store,
tpl: tpl,
autoHeight:
true
,
multiSelect:
true
,
id:
'view1'
,
overItemCls:
'hover'
,
itemSelector:
'tr.data'
,
emptyText:
'沒有數據'
,
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頁'
,
handler:
function
() {
store.loadPage(10);
}
}]
})
});
|
注意上述代碼，咱們在分頁工具欄控件中加入了一個按鈕，當單擊這個按鈕時，數據集自動翻到第十頁。
最後咱們看看展現效果：
2.擴展後的翻頁控件
咱們能夠經過ux擴展支持定義不一樣風格的分頁控件，這效果就像三國殺擴展包同樣，咱們能夠經過滾軸控件和進度條控件去展現當前處於分頁項的哪一個位置。咱們在分頁控件的配置部分添加以下代碼:
[Js]
|
1
|
plugins: Ext.create(
'Ext.ux.SlidingPager'
, {})
|
展現效果：
|
1
|
plugins: Ext.create(
'Ext.ux.ProgressBarPager'
, {})
|
展現效果：
完整的代碼：
[Js]
3、Ext.ux.statusbar.StatusBar
這個狀態欄控件也是ext的一個擴展支持，不過它就好像軍爭包同樣，此次不是小小改進，而是一個全新的控件。
首先定義一個函數，它在前2秒將狀態欄設置爲繁忙狀態，2秒後恢復：
[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);
};
|
接着咱們將要幾個按鈕到狀態欄，第一個設置狀態爲錯誤：
[Js]
|
1
2
3
4
5
6
7
8
|
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.setStatus({
text:
'錯誤!'
,
iconCls:
'x-status-error'
,
clear:
true
// 自動清除狀態
});
}
|
第二個設置狀態爲加載中：
[Js]
|
1
2
3
4
|
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.showBusy();
}
|
第三個爲清除狀態：
[Js]
|
1
2
3
4
|
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.clearStatus();
}
|
展現效果，分別是加載、錯誤、和清除狀態：
完整的代碼：
|
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
,
//layout: 'fit',
title:
'演示狀態欄'
,
items: [{ xtype:
"button"
, text:
"測試"
, id:
"button1"
, handler:
function
(btn, statusBar) {
loadFn(
"button1"
,
"statusbar1"
);
}
}],
bbar: Ext.create(
'Ext.ux.statusbar.StatusBar'
, {
id:
'statusbar1'
,
defaultText:
'就緒'
,
text:
'沒有任務'
,
iconCls:
'x-status-valid'
,
items: [
{
xtype:
'button'
,
text:
'設置狀態'
,
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.setStatus({
text:
'錯誤!'
,
iconCls:
'x-status-error'
,
clear:
true
// 自動清除狀態
});
}
},
{
xtype:
'button'
,
text:
'設置爲加載狀態'
,
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.showBusy();
}
},
{
xtype:
'button'
,
text:
'清除狀態'
,
handler:
function
() {
var
sb = Ext.getCmp(
'statusbar1'
);
sb.clearStatus();
}
}
]
})
});
});
|
相關文章
- 1. 【Qt筆記】菜單欄、工具欄和狀態欄
- 2. Qt Widgets——工具欄和狀態欄
- 3. 標題欄、菜單欄、工具欄、狀態欄
- 4. ExtJS4 多行工具欄
- 5. PyQt5的菜單欄,工具欄,狀態欄的合併
- 6. Qt純代碼實現菜單欄、工具欄、狀態欄
- 7. C#中菜單欄,工具欄,狀態欄的學習總結
- 8. Qt實現菜單欄，工具欄，狀態欄
- 9. 【PyQt5 學習記錄】005：QMainWindow 及狀態欄、菜單欄和工具欄
- 10. PyQt5學習記錄(2)---QMainWindow菜單欄、狀態欄和工具欄
- 更多相關文章...
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
