1

我正在使用 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', { 扩展：'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'
            }]
        }]
    }]

});
4

1 回答 1

1

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

于 2012-08-06T23:42:29.403 回答