ExtJs 5将存储绑定到网格中的单元格编辑器

时间:2015-03-23 10:44:11

标签: mvvm extjs5 javascript-databinding

我试图将商店绑定到网格中的组合框编辑器。我的视图是带有cellediting插件的网格的子类。我尝试使用yes / no选项绑定至少静态存储。我尝试了很多选项,没有任何效果。

网格类:

Ext.define('App.view.school.room.RoomGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.school-room-grid',

controller: 'school-room-grid',

requires: [
    'App.view.school.room.RoomGridController',
    'App.view.school.room.RoomGridViewModel',
    'Ext.button.Button',
    'Ext.grid.plugin.CellEditing',
    'Ext.grid.Panel',
    'Ext.picker.Color',
    'Ext.toolbar.Paging',
    'Ext.toolbar.Toolbar'
],

reference: 'roomGrid',

viewModel: {
    type: 'room'
},

bind: {
    store: '{rooms}',
    title: '{currentRoom.name}'
},

border: false,
itemId: 'testGrid',
glyph: 0xf0ce,
forceFit: true,
plugins: [
    {
        ptype: 'cellediting',
        pluginId: 'editing'
    }
],
header: {
    title: 'Title',
    padding: '4 9 4 9'
},
columns: [
   //...
    {
        xtype: 'gridcolumn',
        dataIndex: 'general',
        text: 'SomeColumnYesNo',
        editor:{
            xtype: 'combobox',
            bind: {
                value:'{currentRoom.general}',
                store:'{yesnoCombo}' //not working
            },
            displayField : 'name',
            valueField : 'id',
            selectOnFocus: true
        }
    }
],
buttons: [
    {
        itemId: 'addButton',
        xtype: 'button',
        width: 70,
        scale: 'small',
        text: 'Dodaj',
        glyph: 0xf067
    },
    {
        itemId: 'printButton',
        xtype: 'button',
        width: 70,
        scale: 'small',
        text: 'Drukuj',
        glyph: 0xf02f
    },
    {
        xtype: 'tbfill'
    },
    {
        itemId: 'rejectButton',
        xtype: 'button',
        width: 22,
        scale: 'small',
        text: 'Anuluj',
        glyph: 0xf021,
        bind: {
            disabled: '{!storeDirty}'
        }
    },
    {
        itemId: 'saveButton',
        xtype: 'button',
        width: 22,
        scale: 'small',
        text: 'Zapisz',
        glyph: 0xf00c,
        bind: {
            disabled: '{!storeDirty}'
        }
    }
],

initComponent: function () {

    me.callParent(arguments);
},

});

ViewModel类:

Ext.define('App.view.school.room.RoomGridViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.room',

requires: [
    'App.store.RoomStore',
    'App.store.BuildingStore',
    'App.store.TeacherStore',
    'App.store.local.YesNoStore'
],

stores: {
    //...
    yesnoCombo:{
        type:'local.yesnostore'
    }
},

data: {
    currentRoom: null
}

});

ViewController类:

Ext.define('App.view.school.room.RoomGridController', {
extend: 'Deft.mvc.ViewController',
alias: 'controller.school-room-grid',

requires: [
    'App.view.school.room.RoomGridViewModel'
],

inject: [
    'viewContext'
],

bind: {
    currentRoom: '{currentRoom}',
    store: '{rooms}'
},

config: {
    currentRoom: null,

    /** @type App.store.RoomStore */
    roomStore: null,
    /** @type App.context.ViewContext */
    viewContext: null
},

control: {
    '#': {
        boxready: 'onBoxReady',
        select: 'onSelect'
    },
    '#addButton': {
        click: 'onAddButtonClick'
    },
    '#rejectButton': {
        click: 'onRejectButtonClick'
    },
    '#saveButton': {
        click: 'onSaveButtonClick'
    }
},

onStoreLoading: function () {
    Deft.Logger.info(this.$className + '.onStoreLoading');
    var me = this;
    me.getView().setLoading(true);
},

onStoreLoaded: function () {
    Deft.Logger.info(this.$className + '.onStoreLoaded');
    var me = this;
    me.getView().setLoading(false);
},
//...
}

静态存储:

Ext.define('Perykles.store.local.YesNoStore', {
extend:'Ext.data.Store',
fields: ['id', 'name'],
autoLoad:false,
alias: 'store.local.yesnostore',
data : [
    {"id":"true", "name":"Tak"},
    {"id":"false", "name":"Nie"}
]
});

当我点击列绑定存储以编辑值而不是在组合框中显示是/否选项时,我收到以下错误:

[E] Cannot modify ext-empty-store 
Object 
console.trace()
Uncaught Error: Cannot modify ext-empty-store 

任何帮助都将不胜感激。

0 个答案:

没有答案