Question

我正在使用ExtJs 4.1.0而我正在尝试显示由远程json存储支持的数据网格。当我像这样渲染网格时：

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath({
    'Grip':'app'
    ,'Ext.ux':'ext/examples/ux'
});
Ext.require([
    'Grip.view.EditableGrid'
    ,'Grip.store.UYNMeetingTypes'
    ,'Grip.view.UYNMeetingGrid'
    ,'Grip.model.UYNMeeting'
    ,'Grip.store.UYNMeetings'
    ,'Ext.ux.CheckColumn'
]);

Ext.require([
    'Ext.panel.*',
    'Ext.toolbar.*',
    'Ext.button.*',
    'Ext.container.ButtonGroup',
    'Ext.layout.container.Table',
    'Ext.tip.QuickTipManager'
]);

Ext.onReady(function() {

    var store = new Grip.store.UYNMeetings();
    grid = new Grip.view.UYNMeetingGrid({
        store: store
        ,renderTo: Ext.getBody()
    });
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function(){
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'store was loaded, data available for processing',
                modal: false,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        }
    });
});

它工作正常。但是，当我尝试使用MVC教程（http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/）中建议的方式链接时，我似乎无法显示我的数据。我在Google Chrome 20.0.1132.47上运行ExtJs 4.1.0。有什么想法吗？

我试图只发布最低限度相关的代码（尽管它看起来仍然很多）。如果有任何我可以澄清的话，请告诉我。任何帮助将不胜感激。谢谢！

Grip.controller.UYNMeeting：

Ext.define（'Grip.controller.UYNMeeting'，{ extend：'Ext.app.Controller'，

refs: [{
    ref: 'meetingGrid',
    selector: 'uynmeetinggrid'
}],

stores: ['UYNMeetings','UYNMeetingTypes'],

init: function() {

},

onLaunch: function() {
    var meetingsStore = this.getUYNMeetingsStore();        
    meetingsStore.load({
        callback: this.onMeetingsLoad,
        scope: this
    });
    var meetingTypesStore = this.getUYNMeetingTypesStore();        
    meetingTypesStore.load({
        callback: this.onMeetingTypesLoad,
        scope: this
    });
},

onMeetingsLoad: function() {
},

onMeetingTypesLoad: function() {
    Ext.Msg.show({
        title: 'Store Load Callback',
        msg: 'store was loaded, data available for processing',
        modal: false,
        icon: Ext.Msg.INFO,
        buttons: Ext.Msg.OK
    });
}

}）;

Grip.view.UYNMeetingGrid：

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
});

Ext.define('Grip.view.UYNComboBox', {
    extend:'Ext.form.field.ComboBox'
    ,alias:'widget.uyncombo'
    ,stores:['UYNMeetingTypes']
})

Ext.define('Grip.view.UYNMeetingGrid', {
    extend:'Ext.grid.Panel'
    ,alias:'widget.uynmeetinggrid'

    ,stores:['UYNMeetings']
    ,title:'UYN Meetings Grid'
    ,hideHeaders: true

    ,bodyPadding:5
    ,width:550
    ,height:400
    ,autoScroll: true

    ,initComponent:function(){
        this.columns = [{
            "width": 150,
            "text": "Name",
            "sortable": true,
            //"id": "name",
            "dataIndex": "name",
            editor: {
                allowBlank: false,
                xtype: 'textfield'
            }
        },
        {
            "width": 150,
            "text": "Org.",
            "sortable": true,
            //"id": "org",
            "dataIndex": "org",
            editor: {
                allowBlank: true,
                xtype: 'textfield'
            }
        },
        {
            "width": 100,
            "text": "Date",
            "sortable": true,
            //"id": "date",
            "dataIndex": "date",

            editor: {
                xtype: 'datefield',
                allowBlank: false,
                format: 'm/d/Y',
                maxText: 'Cannot have a meeting date in the future!',
                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
            }
        },
        {
            "width": 75,
            "text": "Meeting Type",
            "sortable": true,
            //"id": "meeting_type",
            "dataIndex": "meeting_type"/*,
            editor: {
                xtype: 'uyncombo'
            }*/
        },
        {
            "width": 75,
            "text": "Num Hours",
            "sortable": true,
            //"id": "num_hours",
            "dataIndex": "num_hours",
            editor: {
                allowBlank: false,
//                 step: '.1',
                xtype: 'numberfield'
            }
        }];

        this.dockedItems = [{
            dock:'bottom'
            ,xtype:'toolbar'
            ,items: [{
                xtype:'button'
                ,text:'New'
                ,action:'newuynmeeting'
            }, {
                xtype:'button'
                ,text:'Edit'
                ,action:'edituynmeeting'
            }, {
                xtype:'button'
                ,text:'Remove'
                ,action:'removeuynmeeting'
            }]
        }];

        this.callParent();
    }

    ,plugins: [rowEditing]
    ,listeners: {
        'selectionchange': function(view, records) {
//          grid.down('#removeEmployee').setDisabled(!records.length);
        }
    }


});

Grip.view.Viewport：

Ext.define('Grip.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',

    requires: [
        'Grip.view.ContactsPanel'
        ,'Grip.view.UYNMeetingForm'
        ,'Grip.view.UYNMeetingGrid'
        ,'Grip.view.NavBar'
    ],
    renderTo: 'app',
    tbar:{
        xtype:'mynavbar'
    },
    items:[{
        xtype:'tabpanel',
        items:[{ 
            title:'Contacts',
            xtype:'tabpanel',
            items:[{
                title:'Contacts'
                ,xtype:'contactspanel'
            },{
                title:'Add Contact'
                ,html:'TODO: Add content'
            }
            ]
        },{
            title:'UYN',
            xtype:'tabpanel',
            items:[{
                title:'UYN Meetings'
                //,html:'Foo'
                ,xtype:'uynmeetinggrid'
            }]
        }]
    }]

});

Answer 1

我不知道它是否是拼写错误，但网格没有stores配置 - 它只能显示一个商店的数据，因此它有一个store配置（单数），而不是复数）

网格数据未在ExtJs应用程序中显示

1 个答案: