精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯系客服
ExtJs4 筆記（12） Ext.toolbar.Toolbar 工具欄、Ext.too...

本篇講解三個工具欄控件。其中Ext.toolbar.Toolbar可以用來放置一些工具類操控按鈕和菜單，Ext.toolbar.Paging專門用來控制數據集的分頁展示，Ext.ux.statusbar.StatusBar用來展示當前的狀態信息。

一、Ext.toolbar.Toolbar

工具欄控件可以被附加在面板、窗口等容器類控件中，可以在四個方位添加多個工具欄控件。我們演示多個Ext.toolbar.Toolbar控件，然后附加到面板的不同位置。

1.在工具欄上添加菜單、按鈕、搜索功能

我們這里借用上一篇所講到的listview控件作為數據展示，把listview放入一個面板控件中，然后把工具欄添加到面板頂部，并且在工具欄中實現數據集的服務端搜索的功能。

首先我們定義一個數據模型和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();

服務端的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);
}

接著定義一個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]

二、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]

三、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();
                    }
                }
            ]
        })
 
    });
});
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
MFC之在對話框創建菜單、工具欄、狀態欄
Extjs----Ext.Message以及Window彈出窗口
[轉]Extjs 擴展Htmleditor，支持 圖片上傳 文件上傳 插入flash 插入...
〖ExtJS〗之ToolBar實例
Ext基本組件類型
ExtJs2.0學習系列(2)--Ext.Panel
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點擊這里聯系客服！

聯系客服

主站蜘蛛池模板： 吉水县| 昂仁县| 滦平县| 马山县| 山东省| 基隆市| 丹凤县| 阿拉善左旗| 青海省| 威海市| 利川市| 中宁县| 洞头县| 辽中县| 永新县| 开远市| 白沙| 苏尼特左旗| 临沧市| 曲周县| 齐齐哈尔市| 兴文县| 合江县| 五家渠市| 闽侯县| 公主岭市| 名山县| 监利县| 钟山县| 蕲春县| 上犹县| 利辛县| 新安县| 武城县| 新宁县| 庆安县| 乌拉特中旗| 嘉定区| 琼中| 通江县| 奉贤区|