Extjs 5无法读取未定义

时间:2016-04-05 18:24:10

标签: javascript extjs mvvm

嗨我在extjs 5 mvvm例子中遇到了麻烦。我的商店不被认可。我从堆栈尝试了similliar解决方案,但它仍然崩溃。

项目结构: structure

代码:

Message.js

Ext.define('Tgis.view.message.Message', {
extend : 'Ext.window.Window',
title: 'Wiadomosci',
requires : ['Tgis.view.message.MessageController'],
store: 'MessageStore',
alias : 'widget.message',

config : {
    minHeight: 320,
    minWidth:400,
    bodyPadding : 10,
    width : 500,
    ghost : false,
    bodyPadding : 10,
    autoShow : true     
},
items: [{
    xtype:'panel',
    layout : 'vbox',
        items : [
            { 
                xtype : 'mvvm-DateView' ,
                flex  : 1
            },
            { 
                xtype : 'mvvm-MessageView',
                flex  : 5
            }]
}]});

Messagedate.js

 Ext.define('Tgis.view.message.MessageDate', {
extend : 'Ext.grid.Panel',
xtype  : 'mvvm-DateView',



store : 'MessageStore',

columns: [
    { 
        text      : 'Data',  
        dataIndex : 'date' 
    }
]});

MessageMaster.js

 Ext.define('Tgis.view.message.MessageMaster', {
extend : 'Ext.form.Panel',
xtype  : 'mvvm-MessageView',

requires : [

    'Tgis.view.message.MessageViewModel'
],

title   : 'Wiadomosci',
frame   : true,
padding : 10,

viewModel : {
    type : 'detailform'  // references DetailViewModel
},

items : [
    {
        xtype      : 'textfield',
        bind       : '{rec.message}',
        fieldLabel : 'Tresc:'
    },
    {
        xtype : 'hiddenfield',
        bind  : '{rec.id}'
    }
]});

MessageModel.js

Ext.define('Tgis.view.message.MessageModel', {
extend : 'Ext.data.Model',
fields : [
    {
        name : 'date',
        type : 'date'
    },
    {
        name : 'message',
        type : 'string'
    },
    {
        name : 'id',
        type : 'integer'
    }
]});



Ext.define('Tgis.view.message.MessageStore', {
extend  : 'Ext.data.Store',

model   : 'Tgis.view.message.MessageModel',
storeId: 'MessageStore',
data : [
    { 
        'date'  : '28.05.1994',  
        'message' : 'lisa@simpsons.com',
        'id' : '1'
    }
]});

MessageController.js

Ext.define('Tgis.view.message.MessageController', {
extend : 'Ext.app.Controller',


init: function() {
     this.control({
         'mvvm-DateView': {
             select : this.onGridSelect
         }
     });
 },

onGridSelect : function(grid, record, index, eOpts) {
    // grab a reference to the Detail view... 
    // we could have used a controller "ref", but those can also be problematic
    var detailView = Ext.ComponentQuery.query('mvvm-DateView')[0];

    //set the form's ViewModel binding
    detailView.getViewModel().setData({ rec: record });
}});

MessageViewModel.js

 Ext.define('Tgis.view.message.MessageViewModel', {
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.detailform',

data : {
    rec : null
}});

Main.js

xtype: 'app-main',

controller: 'main',
viewModel: {
    type: 'main'
},

layout: {
    type: 'border'
},

items: [{
    xtype: 'panel',
    bind: {
        title: '{name}'
    },
    region: 'west',
    width: 250,
    split: true,
    defaultType : 'button',
    layout : 'vbox',
    items : [{
        text : 'Wiadomości',
        handler : 'onClickMessages'
    },{
        text : 'Wyczyść LC',
        handler : 'onClearMessages'
    }]
},{
    region: 'center',
    xtype: 'tabpanel',
    items:[{
        title: 'Tab 1',
        html: '<h2>Content appropriate for the current navigation.</h2>'
    }]
}]});

MainController.js

Ext.define('Tgis.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',


onClickButton: function () {
    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
    if (choice === 'yes') {
        //
    }
},

onClickMessages : function(button) {
    Ext.Ajax.request({
        url : 'http://localhost:8080/Messagess/res',
        method : 'GET',
        success : function(response) {
            var json = Ext.decode(response.responseText);
            //var itemsArray = new Array();
            /*for (var i = 0; i < json.data.length; i++) {
                var date = new Date(json.data[i].date);
                        var messageTxt = Ext.create('Ext.form.field.TextArea', {
                        fieldLabel :date.toLocaleString(),
                        value : json.data[i].message,
                        editable : false,
                        grow : true,
                        width : '100%'
                    });
                if (localStorage.getItem('date') != 'null')
                    itemsArray.push(messageTxt);
            }

            var checkbox = Ext.create('Ext.form.field.Checkbox', {
                    id : 'checkboxmessage',
                    boxLabel : 'Nie pokazuj ponownie'
                });
            itemsArray.push(checkbox);*/
            Ext.create('Tgis.view.message.Message', {
                //messagess: json.data
                    //Ext.getCmp('usernameID').setValue('JohnRambo');
                        /*items: itemsArray,
                            buttons : [{
                            xtype : 'button',
                            text : 'Zamknij',
                            handler : 'onCloseClick'
                        }]*/

                    })
        }
    });
},

onClearMessages : function(button) {
    localStorage.setItem('date', '0');
}});

MainModel.js

Ext.define('Tgis.view.main.MainModel', {
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.main',

data: {
    name: 'Tgis'
}});

2 个答案:

答案 0 :(得分:2)

您已经定义了一个&#34;商店模板&#34;但没有创建商店实例。

如果要创建该类型的多个商店(例如每个网格一个),请按以下方式执行:

xtype:'grid',
store:Ext.create('MyApp.store.SomeStore',{
    ...
}),

如果您只想要一个这种类型的商店,只需将商店添加到stores:[]中的Application.js数组中即可。

答案 1 :(得分:1)

在我的项目中解决了这样的调用存储

store: {
    type: 'MessageStore'
}