`

ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.St

 
阅读更多

 

本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext.ux.statusbar.StatusBar用来展示当前的状态信息。

一、Ext.toolbar.Toolbar

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

1.在工具栏上添加菜单、按钮、搜索功能

我们这里借用上一篇所讲到的listview控件作为数据展示，把listview放入一个面板控件中，然后把工具栏添加到面板顶部，并且在工具栏中实现数据集的服务端搜索的功能。

首先我们定义一个数据模型和Store：

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输出代码：

 

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，在工具栏里面添加了工具按钮、普通文字、分割线、和菜单，还实现了搜索的功能：

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参数：

 

 

{
            text: "搜索",
            handler: function () {
                store.load({ params: { keyword: filed1.getValue()} });
            }
}

 最后我们定义一个Panel，把listView和toolbar都添加到Panel上，注意，tbar表示了这个工具栏在上方

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'，代码如下：

 

var bbar = Ext.create('Ext.toolbar.Toolbar', {
    layout: {
        overflowHandler: 'Menu'
    },
    items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
    "溢出测试", "溢出测试",
    {
        xtype: "button",
        text: "溢出按钮",
        handler: function () {
            Ext.Msg.alert("提示", "工具栏按钮被点击");
        }
    }, { text: "溢出按钮", xtype: "splitbutton"}]
});
 

预览下效果：

3.在右侧的工具栏

现在我们要实现放置在右侧的工具栏，这次我们直接在面板的代码里面写,代码如下：

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'
        }
    ]
});
 

预览下效果：

最后奉上完整的代码：

 

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'
            }
        ]
    });
 
 
});
 

二、Ext.toolbar.Paging

1.基本的分页工具栏控件

Ext.toolbar.Paging就是一个特殊的工具栏，它提供了数据集翻页的功能，下面我们看看store的实现：

 

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的代码如下：

 

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控件，把它放置到一个面板中，面板的代码如下：

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扩展支持定义不同风格的分页控件，这效果就像三国杀扩展包一样，我们可以通过滚轴控件和进度条控件去展示当前处于分页项的哪个位置。我们在分页控件的配置部分添加如下代码:

plugins: Ext.create('Ext.ux.SlidingPager', {})
 

展示效果：

?

 

 

plugins: Ext.create('Ext.ux.ProgressBarPager', {})
 

 

展示效果：

 

完整代码：

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
//Ext.Loader.setPath('Ext.ux.DataView', '/ExtJs/ux/DataView');
 
Ext.onReady(function () {
 
    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
    });
 
    var tpl = new Ext.XTemplate(
        '<table cellpadding=0 cellspacing=0 border=1 width=450px>',
        '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
        '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',
        '<tpl for=".">',
            '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
        '</tpl>',
        '</table>'
    );
 
    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);
                    }
                }],
            plugins: Ext.create('Ext.ux.SlidingPager', {})
            //plugins: Ext.create('Ext.ux.ProgressBarPager', {})
        })
    });
});
 

三、Ext.ux.statusbar.StatusBar

这个状态栏控件也是ext的一个扩展支持，不过它就好像军争包一样，这次不是小小改进，而是一个全新的控件。

首先定义一个函数，它在前2秒将状态栏设置为繁忙状态，2秒后恢复：

 

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);
};

 

接着我们将要几个按钮到状态栏，第一个设置状态为错误：

handler: function () {
    var sb = Ext.getCmp('statusbar1');
    sb.setStatus({
        text: '错误!',
        iconCls: 'x-status-error',
        clear: true // 自动清除状态
    });
}

 第二个设置状态为加载中：

handler: function () {
    var sb = Ext.getCmp('statusbar1');
    sb.showBusy();
}

 第三个为清除状态：

 

handler: function () {
    var sb = Ext.getCmp('statusbar1');
    sb.clearStatus();
}
 

展示效果，分别是加载、错误、和清除状态：

完整的代码：

 

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();
                    }
                }
            ]
        })
 
    });
});

 

转：http://www.cnblogs.com/lipan/archive/2011/12/23/2298746.html

分享到：
| ExtJs xtype一览
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...

    extjs4.1-ux.rar

    4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext.ux.grid.plugin.SortMenu 9、Ext.ux.grid.plugin....

    Ext.ux.UploadDialog.zip

    这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件，方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面，让用户能够选择并上传文件到服务器。这个组件通常...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域，特别是使用ExtJs框架进行复杂用户界面构建时，`RowEditor` 是一个非常实用的功能，它允许用户直接在表格行内编辑数据，极大地提高了...

    Ext.ux.SwfUploadPanel.js

    `Ext.ux.SwfUploadPanel.js`是这样一个基于ExtJS和SwfUpload技术的插件，它实现了多文件上传的功能。这篇文章将深入探讨这个插件的工作原理、主要特点以及如何在实际项目中应用。 首先，`ExtJS`（全称为EXT ...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...

    Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用

    综上所述，ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具，它结合了下拉框的简洁和树结构的层次感，提供了丰富的定制选项，能满足多种场景下的需求。理解并熟练掌握其用法，将极大地提升开发效率和用户...

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中，`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件，适用于展示具有层级关系的数据。通过...

    Ext JS Notification 插件

    Ext JS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件和功能，用于构建富客户端Web应用。在Ext JS中，“Notification”插件是用于显示通知消息的一个组件，它可以帮助开发者在用户界面上创建吸引...

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树（Ext.ux.tree.PagingTreeLoader）是一个强大的扩展，它在处理大量数据时尤其有用，因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能，允许用户逐步加载树节点，而不是一次性加载...

    ExtJS 3.4.0中的 ext.jsb2 文件

    在ExtJS 4中，构建过程被重新设计，引入了新的构建系统，如使用`app.json`代替`ext.jsb2`。`app.json`包含了关于应用结构和依赖的信息，使得构建过程更加灵活和可配置。然而，由于`ext.jsb2`在4.0.0中不存在，如果你...

    ExtJs4_笔记.docx

    - **Ext.toolbar.Toolbar**、**Ext.toolbar.Paging**和**Ext.ux.statusbar.StatusBar**：工具栏、分页栏和状态栏的创建和应用。 - **Ext.menu.Menu**、**Ext.draw.Component**和**Ext.resizer.Resizer**：菜单、绘图...

    Ext.ux.UploadDialog批量上传文件实例

    Ext.ux.UploadDialog批量上传文件实例是一个基于ExtJS组件库扩展插件的文件上传解决方案，主要针对需要一次性处理多个文件上传的应用场景。ExtJS是一个强大的JavaScript框架，它提供了丰富的用户界面组件，而Ext.ux....

    extjs-ux, EXT JS 4的一些插件和扩展.zip

    extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示：链接论坛：链接 Ext.ux. grid.feature.Tileview 演示：链接

    Ext.tree.TreeLoader附带封装的json类

    在本文中，我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件，它负责加载和解析树形结构的数据，而JSON（JavaScript Object Notation）则是一种轻...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件，它结合了下拉框（ComboBox）和树形控件（TreePanel）的功能，提供了一种用户友好的选择界面。在网页应用中，这种控件常用于展示层级...

    ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题

    总的来说，Ext.ux.UploadDialog是一个强大的多文件上传工具，它简化了文件上传的复杂性，并提供了良好的用户体验。然而，正确地使用和配置这个组件需要对ExtJS框架有深入理解，同时也需要熟悉服务器端的文件处理逻辑...

    ExtJS ToolTip功能

    ### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中，`ToolTip`功能是一种非常实用且灵活的功能，它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...

Magicbox
Global site tag (gtag.js) - Google Analytics