Javascript - ExtJs - Itemselector

Posted 2020-10-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - ExtJs - Itemselector相关的知识，希望对你有一定的参考价值。

引入扩展文件

Extjs4.2根目录下：

examples \\ ux \\ css \\ images （这是选择按钮的图片资源）
examples \\ ux \\ css \\ ItemSelector.css
examples \\ ux \\ form \\ MultiSelect.js
examples \\ ux \\ form \\ ItemSelector.js

我是将以上文件取出来打包到我项目中自己创建的ux目录，没有全部使用ExtJs的包，然后引入以上文件：

{
    xtype: "fieldset",
    title: "选择仓库管理员",
    columnWidth: .100,
    style: "padding:10px;",
    items: [
        {
            xtype: "panel",
            layout: "fit",
            cls: "panelBoder",
            height:220,
            items: [
                {
                    xtype: \'itemselector\',
                    anchor: \'100%\',
                    id: \'UserManagerItemselector\',
                    style:"margin-bottom:10px;",
                    //fieldLabel: \'ItemSelector\',
                    imagePath: \'/ExtJs/ux/css/images/\', //这是选择按钮的图片资源
                    store: "UserManagerStore",
                    displayField: \'UserName\',
                    valueField: \'UserId\',
                    //value: [\'3\', \'4\', \'6\'], //默认选中项
                    allowBlank: false,
                    blankText: "必须选择至少一项",
                    msgTarget: "title",
                    fromTitle: \'可选\', //左边的选择框
                    toTitle: \'已选\' //右边的选择框
                }
            ],
            bbar: [
                {
                    xtype: "pagingtoolbar",
                    store: "UserManagerStore",
                    displayInfo: true,//是否显示分页的额外信息
                    displayMsg: \'显示第 {0} 条到 {1} 条记录，一共 {2} 条\',//displayInfo为true时，此属性才能生效
                    emptyMsg: "没有记录",
                    listeners: {
                        beforechange: function () {
                            var cmp = Ext.getCmp("UserManagerItemselector");
                            var selectedRecords = cmp.toField.store.getRange();
                            if (!window.UserManagerItemselectorOldVal) { window.UserManagerItemselectorOldVal = [] };//将翻页前已经选中的记录存入临时的全局变量中
                            window.UserManagerItemselectorOldVal = selectedRecords;
                            cmp.fromField.store.removeAll(); //清空左侧选择框所对应的存储器存储的全部数据以便点击下一页时左侧选择框可以重新加载新数据而不是默认的追加新数据
                            //Ext.getCmp("UserManagerItemselector").clearValue(); //清空已经选择好的项
                            //Ext.getCmp("UserManagerItemselector").toField.store.removeAll(); //直接清空右侧选择框中所对应的存储器存储的全部数据，这个存储器是隐藏的

                        }
                    }
                },
                {
                    xtype: "panel",
                    items: [
                        {
                            xtype: "button", text: "撤回", style: "background:red;border:none;margin:10px 0;", icon: "../img/ico/expand-down.png", handler: function () {
                                var cmp = Ext.getCmp("UserManagerItemselector");
                                var oldVal = window.UserManagerItemselectorOldVal;
                                if (oldVal) {
                                    cmp.getStore().add(oldVal);
                                    window.UserManagerItemselectorOldVal = null;
                                }
                                cmp.clearValue();
                            }
                        }
                    ],
                }
            ]
        }
    ]
}

/*提交表单取多选框的值*/
buttons: [
    {
        text: \'仓库信息登记\',
        handler: function () {
            var cmp = Ext.getCmp("UserManagerItemselector");
            var StockUserIDs = cmp.getValue(); //选中的值
            //无值则将多选框的边框描红自行设置panelRedBoder的css
            if (StockUserIDs.length == 0) {
                cmp.up("panel").addCls("panelRedBoder");
            }
            else {
                cmp.up("panel").removeCls("panelRedBoder");
            }
            if (!form.isValid()) { return; }
            StockUserIDs=StockUserIDs.join(",")
            //……
        }
    }
]

选择框边框样式

在GridPanel列编辑状态下的Itemselector

比如在上面的表格中双击某个列，要对该列记录进行编辑，这要注意以下几点：

1.如果将Itemselector置于window组件中，因为window的遮罩的缘故，存储器中的数据只能够被访问一次，解决办法是将存储器置于创建window的函数中。

2.通过编辑器的beforeedit事件使用context.record获得当前编辑的记录，然后将该记录插入到Itemselector的存储器中，在Itemselector渲染后再模拟Itemselector的add select按钮的方法将记录从左侧移动到右侧

3.该列的数据存储器去服务端拿数据的时候要排除当前列（比如张飞、刘备）的ID，这样当前列的数据就只会出现在右侧（已选择）的框中，属于默认选中项。

4.因为从服务端取数据的时候排除了当前列的数据的ID，所以假如右侧的默认选中项丢失了，还得将它们找回来，比如定义一个还原的按钮，用户点击后随时可以还原默认选中项。

5.双击张飞、刘备一列，会弹出window，这列里有两个数据，他们有各自的ID，而这两个ID是一个数组，通过查询表格数据的时候该行记录对应的多个管理员的ID放入了数组中。模型如下：

// #region 仓库数据模型 Ext.define("StockTableModel", {
    extend: "Ext.data.Model",
    fields: [
        { name: "StockTableId", type: "int" },
        { name: "StockName", type: "string" },
        { name: "CompanyName", type: "string" },
        { name: "StockAddress", type: "string" },
        { name: "UserIDs", type: "auto" }, //仓库管理员名称存储在数组中
        { name: "UserNames", type: "auto" } //仓库管理员ID存储在数组中
    ]
});
// #endregion

GridPanel编辑状态下弹出多选框，读取默认值。打包

//多选框打包
function CreateItemselectorEditWindow(options) {

    var windowTitle = options.windowTitle;
    var fieldsetTitle = options.fieldsetTitle;
    var storeId = options.storeId;
    var editRecord = options.editRecord;
    var tableModelFieldText = options.tableModelFieldText;
    var tableModelFieldKey = options.tableModelFieldKey;
    var cellModelFieldText = options.cellModelFieldText;
    var cellModelFieldKey = options.cellModelFieldKey;
    //将当前要编辑的记录取出来存入oldRec
    var oldRecs = [];
    var Keys = editRecord.get(tableModelFieldKey);
    var Texts = editRecord.get(tableModelFieldText);
    for (var i = 0; i < Keys.length; i++) {
        var obj = {
            [cellModelFieldKey]: Keys[i],
            [cellModelFieldText]: Texts[i]
        };
        oldRecs.push(obj);
    }

    Ext.create("Ext.window.Window", {
        id: "EditWin",
        title: windowTitle,
        autoShow: true,
        forceFit: true,
        width: 800,
        style: "border:none;padding:10px;",
        border: false,
        modal: true,
        layout: "anchor",
        items: [
            //创建表单
            Ext.create("Ext.form.Panel", {
                id: "EditForm",
                forceFit: true,
                style: "border:none;padding:10px;",
                border: false,
                items: [
                    {
                        xtype: "fieldset",
                        title: fieldsetTitle,
                        columnWidth: .100,
                        style: "padding:10px;",
                        items: [
                            {
                                xtype: "panel",
                                layout: "fit",
                                cls: "panelBoder",
                                height: 220,
                                items: [
                                    {
                                        xtype: \'itemselector\',
                                        anchor: \'100%\',
                                        id: \'xItemSelector\',
                                        style: "margin-bottom:10px;",
                                        imagePath: \'/ExtJs/ux/css/images/\',
                                        store: storeId,
                                        displayField: cellModelFieldText,
                                        valueField: cellModelFieldKey,
                                        allowBlank: false,
                                        blankText: "必须选择至少一项",
                                        msgTarget: "title",
                                        fromTitle: \'可选\',
                                        toTitle: \'已选\',
                                        listeners: {
                                            afterrender: function () {
                                                var xItemSelector = Ext.getCmp("xItemSelector");

以上是关于Javascript - ExtJs - Itemselector的主要内容，如果未能解决你的问题，请参考以下文章

ExtJS学习-----------Ext.String，ExtJS对javascript中的String的扩展

extjs4 怎么取到所有columns的header 表头名

Javascript/ExtJS：Ext.getCmp('') 导致 TypeError ...不是函数

如何使用 javascript/Extjs 进行默认横向打印？

EXT JS

从 jQuery 或 vanilla javascript 事件触发合成 ExtJS 事件