1

我是 extjs 的新手。我有一个集成了 extjs 4.2 mvc 的应用程序 asp.net mvc。我的应用程序将有多个窗口。现在我有一个带有按钮和 onclick 事件按钮的菜单打开窗口。有两个窗口。每个窗口都有一个不同商店的网格,但是当我打开窗口时,extjs 加载错误的商店。我不明白。商店正在设置 autoload:false。但不工作=(。

存储 UtenteStore.js:

        Ext.define('MyApp.store.UtenteStore', {
        extend: 'Ext.data.Store',

        requires: [
            'MyApp.model.utenteData'
        ],

        constructor: function (cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: false,
                autoSave: false,
                model: 'MyApp.model.utenteData',
                storeId: 'MyJsonStore',
                idProperty: 'Id',
                proxy: proxy
            }, cfg)]);
        }
    });
    var writer = new Ext.data.JsonWriter({
        type: 'json',
        writeAllFields: true,
        allowSingle: false
    });

    var reader = new Ext.data.JsonReader({
        totalProperty: 'total',
        type: 'json',
        successProperty: 'success',
        messageProperty: 'message'
    });

    var proxy = new Ext.data.HttpProxy({
        timeout: 120000,
        noCache: false,
        reader:reader,
        writer: writer,
        type: 'ajax',
       api: {
            read: '/Clienti/Get',
            create: '/Clienti/Update',
            update: '/Clienti/Update',
            destroy: '/Clienti/Delete'
        },
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    });

存储 FornitoreStore.js:

Ext.define('MyApp.store.FornitoriStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.fornitoriData'
    ],

    constructor: function (cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: false,
            autoSave: false,
            model: 'MyApp.model.fornitoriData',
            storeId: 'MyJsonStore2',
            idProperty: 'Id',
            proxy: proxy
        }, cfg)]);
    }
});

var writer = new Ext.data.JsonWriter({
    type: 'json',
    writeAllFields: true,
    allowSingle: false
});

var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    type: 'json',
    successProperty: 'success',
    messageProperty: 'message'
});

var proxy = new Ext.data.HttpProxy({
    timeout: 120000,
    noCache: false,
    reader: reader,
    writer: writer,
    type: 'ajax',
    api: {
        read: '/Fornitori/Lista',
        create: '',
        update: '',
        destroy: ''
    },
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }
});

这是我的第一个 Windows Clienti.js:

var editor = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

Ext.define('MyApp.view.clienti.Clienti', {
    extend: 'Ext.window.Window',
    height:600,
    width: 800,
    shadow: 'drop',
    collapsible: true,
    title: 'Lista Clienti',
    maximizable: true,
    initComponent: function() {
        var me = this;      
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    id: 'gridpanelId',
                    header:false,
                    store:'MyApp.store.UtenteStore',
                    forceFit: true,
                    columnLines: true,
                    autoResizeColumns: true,
                    selType: 'rowmodel',
                    columns: [
                        {
                            dataIndex: 'CodiceCliente',
                            text: 'Codice',
                            filter: {
                                type: 'int',
                                minValue: 1
                            }

                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DescrizioneCliente',
                            text: 'Descrizione',
                            editor: {
                                xtype: 'textfield',
                                allowBlank: true
                            },
                            filter: true


                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Date'

                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Boolean'
                        }
                    ],
                    listeners: {
                        afterrender: {
                            fn: me.loadDb,
                            scope: me
                        }
                    },
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Inserisci',
                                    listeners: {
                                        click: {
                                            fn: me.inserisciClick,
                                            scope: me
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: 'Elimina',
                                    listeners: {
                                        click: {
                                            fn: me.eliminaClick,
                                            scope: me
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: 'Salva',
                                    listeners: {
                                        click: {
                                            fn: me.salvaClick,
                                            scope: me
                                        }
                                    }
                                }
                            ]
                        }
                    ],
                    plugins: [editor, {
                        ptype: 'filterbar',
                        renderHidden: false,
                        showShowHideButton: true,
                        showClearAllButton: true
                    }]
                }
            ]
        });

        me.callParent(arguments);
    },
    loadDb: function (component, eOpts) {

    },

    inserisciClick: function (button, e, eOpts) {
        editor.cancelEdit();
        Ext.getCmp('gridpanelId').getStore().insert(0, "");
        editor.startEdit(0, 0);
    },

    eliminaClick: function (button, e, eOpts) {
        var sm = Ext.getCmp('gridpanelId').getSelectionModel();
        Ext.getCmp('gridpanelId').getStore().remove(sm.getSelection());    
    },

    salvaClick: function(button, e, eOpts) {    
        Ext.getCmp('gridpanelId').getStore().sync();      
    }

});

这是我的第二个窗口 ListaFornitori.js:

Ext.define('MyApp.view.fornitori.ListaFornitori', {
    extend: 'Ext.window.Window',

    height: 600,
    width: 900,
    layout: {
        type: 'absolute'
    },
    title: 'Lista Fornitori',

    initComponent: function () {

        var me = this;

        Ext.applyIf(me, {
            items: [
                {

                    xtype: 'tabpanel',
                    activeTab: 0,
                    items: [
                        {
                            xtype: 'panel',
                            title: 'Lista',
                            items: [                                 
                                {
                                    xtype: 'gridpanel',
                                    id: 'grdListaFornitori',
                                    height: 362,
                                    header: false,
                                    store:'MyApp.store.FornitoriStore',
                                    forceFit: true,
                                    columnLines: true,
                                    autoResizeColumns: true,
                                    title: '',
                                    columns: [
                                        {
                                            xtype: 'gridcolumn',
                                            dataIndex: 'CodiceFornitore',
                                            text: 'Codice',
                                            filter: {
                                                type: 'int',
                                                minValue: 1
                                            }
                                        },
                                        {
                                            xtype: 'gridcolumn',
                                            dataIndex: 'DescrizioneFornitore',
                                            text: 'Descrizione',
                                            filter:true
                                        }
                                    ],
                                    plugins: [{
                                        ptype: 'filterbar',
                                        renderHidden: false,
                                        showShowHideButton: true,
                                        showClearAllButton: true
                                    }],

                                    viewConfig: {
                                        preserveScrollOnRefresh: true,

                                        listeners: {
                                            afterrender: {
                                                fn: me.loadDb,
                                                scope: me
                                            },
                                            celldblclick: {
                                                fn: me.editClick,
                                                scope: me
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'button',
                    x: 750,
                    y: 450,
                    text: 'Inserisci',
                    icon: '/Scripts/ext-4.2/resources/ico/add.png',
                    listeners: {
                        click: {
                            fn: me.inserisciClick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },
    loadDb: function (component, eOpts) {

    },
    editClick: function (tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        Ext.create('MyApp.view.fornitori.InsFornitori', { rIx: rowIndex }).show();

    },
    inserisciClick: function(button, e, eOpts) {
        Ext.create('MyApp.view.fornitori.InsFornitori').show();
    }

});

Infine 这是我的 app.js:

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: true,
    paths   : {
           'MyApp' : '../MyApp'
        } 
});

Ext.application({
    models: [
        'utenteData',
        'fornitoriData'
    ],
    stores: [
        'MyApp.store.UtenteStore',
        'MyApp.store.FornitoriStore'
    ],
    views: [
        'clienti.Clienti',
        'MyViewport',
        'fornitori.InsFornitori',
        'fornitori.ListaFornitori',
        'fornitori.Fornitori'

    ],
    autoCreateViewport: true,
    name: 'MyApp',
    appFolder: '../MyApp',

});

这是我的结构: 在此处输入图像描述

有人可以帮助我吗?我被困住了几天?对不起我的英语不好

4

2 回答 2

10

有两种方法:

选项 1:这是经过测试的。

xtype: 'gridpanel',
id: 'grdListaFornitori',
... ...
listeners: {
        render:{
          scope: this,
          fn: function(grid) {
             //load store after the grid is done rendering
             grid.getStore().load();
          }
       }
    }

选项 2:尚未尝试此选项。但它应该工作。

loadDb: function (component, eOpts) {
    component.ownerCt.getStore().load();
},
于 2013-05-27T05:10:45.840 回答
0

我也是一个使用 extj 的新手,我可以看到你从来没有在你的商店中调用 load() 方法。您已将 autoLoad 属性设置为 false。尝试调用它,并让我知道它有效。祝你好运!

于 2013-05-16T15:20:41.860 回答