【问题标题】:ExtJs 6 Store not visible in GridExtJs 6商店在网格中不可见
【发布时间】:2015-11-16 15:37:50
【问题描述】:

我正在尝试将现有应用程序从 ExtJs 4.2.1 移植到 6.0.1 在调试器中我看到网格有 'ext-empty-store' 存储而不是 'store.accounting.Quota' 的问题 我可以通过执行直接在面板激活侦听器中加载商店 var store = Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota'); 存储.load(); 在萤火虫中,我看到请求和完美的 json 作为响应,但网格中没有出现任何内容

这里是代码sn-ps

app/store/accounting/Quota.js

Ext.define('QuotaKPI.store.accounting.Quota', {
    extend: 'Ext.data.JsonStore',
    model: 'QuotaKPI.model.accounting.QuotaModel',
    alias: 'store.accounting.Quota',
    storeId: 'QuotaKPI.store.accounting.Quota',
    autoLoad: false,
    proxy: {
        ...
    }
});

app/view/accounting/QuotaGrid.js

Ext.define('QuotaKPI.view.accounting.QuotaGrid', {
    extend: 'Ext.grid.Panel'
    ,xtype: 'QuotaGrid'
    ,store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota')

    ,columns: [ 
    ...
    ]

    ,dockedItems : [
                   ,{xtype: 'pagingtoolbar', 
                    dock:'bottom',
            store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota'),
            displayInfo: true,
            displayMsg: 'Displaying Quota Details {0} - {1} of {2}',
            emptyMsg: "No Quota to display"
            }
                   ]
    ,initComponent: function() {
            this.callParent(arguments);
        }       
   });

在控制器中声明的存储、模型和网格

Ext.define('QuotaKPI.controller.accounting.AccountingController', {
    extend: 'Ext.app.Controller',
    stores: ['accounting.Quota'],
    models: ['accounting.QuotaModel'],
    views: ['accounting.QuotaGrid']
    ...

并且控制器本身在 app.js 中列出

Ext.application({
    name: 'QuotaKPI',
    controllers: [
        'accounting.AccountingController'
    ],
    init: function(app){
    },
    autoCreateViewport: true
});

有什么帮助吗?

【问题讨论】:

    标签: extjs4.2 extjs6 extjs6-classic


    【解决方案1】:

    我知道 storeId 不接受某些字符(例如“-”),我不知道点...无论如何我建议让它变得简单。 试试“myStoreId”

    另外你可以试试:

    Ext.define('QuotaKPI.view.accounting.QuotaGrid', {
        extend: 'Ext.grid.Panel'
        ,xtype: 'QuotaGrid'
        ,store: "myStoreId",
    
        ,columns: [ 
        ...
        ]
    
        ,dockedItems : [
                       ,{xtype: 'pagingtoolbar', 
                        dock:'bottom',
                store: "myStoreId",
                displayInfo: true,
                displayMsg: 'Displaying Quota Details {0} - {1} of {2}',
                emptyMsg: "No Quota to display"
                }
                       ]
        ,initComponent: function() {
                this.callParent(arguments);
            }       
       });
    

    此外,我建议确保您有正确的架构配置(请参阅http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.data.schema.Schema

    然后,您也可以尝试使用 ViewModel 而不是 storeId(请参阅 http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html

    不要犹豫,https://fiddle.sencha.com/#home

    祝你好运! 转型不容易……

    【讨论】:

    • 感谢您的建议。我已将网格中存储的寻址方式更改为 //,store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota') ,store: { type: 'accounting.Quota' } 和存储类型扩展:'Ext.data.Store' 而不是 JsonStore。网格被渲染,但只显示第一页。
    • 如果您这样做,即使您设置了 storeId,当您使用 type 创建商店时,您也会强制框架生成一个 NEW 实例。试试:Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota').getId()Ext.data.StoreManager.lookup({type: 'accounting.Quota}).getId(),你会发现 id 不一样。我建议采用一种方式(使用 storeId 或另一种方式(通过 ViewModel),但要在类内保持一致。“标准”方式是 ViewModel,所以我建议您真正检查您是否需要 storeId 否则使用 ViewModel 方式
    • 非常感谢。最后一条评论帮助我理解了为什么我无法使用分页工具栏浏览页面。
    猜你喜欢
    • 2014-02-11
    • 1970-01-01
    • 2014-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-22
    • 2011-08-28
    相关资源
    最近更新 更多