extjs - 避免在网格上重复输入

标签 extjs combobox

我想比较组合框列,例如公交车时间。在下面的代码中。输入新数据时,它应该比较以前的时间,如果存在相同的时间,我想弹出一个错误,因为存在相同的时间,我怎样才能实现这一点作为验证功能而不是将其添加到监听器。

下面的代码

Ext.application({
    name: 'Fiddle',

    launch: function () {
        run();
        window.show();
    }
});

function run() {
    var myStore=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize:2,
        proxy: {
           type: 'memory',
          enablePaging: true
    },
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]
    });

    Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:1,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Busname can't be empty");
            textfield.setFocus(true);
        }
    },
        height: 200,
        width: 400,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });
}

Fiddle

最佳答案

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  /**
   * Check the store if there's duplicate record based on the given field.
   *
   * @param {Ext.data.Store} store The store to be check
   * @param {String} field The field of the store to be check if has duplicate.
   **/
  function hasDuplicateRecord(store, field) {
      var hasDuplicate = false;
      // Iterate to all store data
      for(var i=0; i < store.data.items.length; i++) {
          var item = store.data.items[i];
          // Check if more than 1 record exists in the given item.
          if(store.queryRecords(field, item.data[field]).length > 1) {
              return true;
          }
      }
      return false;
  }</code></pre>
</div>
</div>

只需在网格中的某个位置调用上述函数即可。

var isInvalid = hasDuplicateRecord(grid.store, 'time');

关于extjs - 避免在网格上重复输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42781890/

相关文章:

wpf - 当我延迟输入最新输入时,组合框过滤器文本丢失

c# - 具有 "Refresh"条目的组合框

c# - WPF MVVM - 单击时更新下拉列表

javascript - javascript 中的无效参数错误

javascript - 在和 Ext JS 表单中,如何使某些字段宽度比其他字段宽度更宽?

javascript - EXTjs 从一个 Controller 访问另一个 Controller 中的数据集

javascript - 在一个应用程序中同时使用 ExtJs 和 JQuery?

javascript - 了解 ExtJS 框架语法

c# - 如何将 Combobox 绑定(bind)到 ReactiveUI 中的命令?

c# - Winforms 组合框在失去焦点时失去自动完成值(value)