Results 1 to 4 of 4

Thread: TypeError: store is undefined

  1. #1
    Sencha User
    Join Date
    Jul 2014
    Posts
    2

    Default TypeError: store is undefined

    Hi all,

    I get TypeError: store is undefined

    if (store.buffered && !store.remoteSort) {

    this my code :

    Store :

    Code:
    Ext.define('PHPExtJS.store.User', {
        extend: 'Ext.data.Store',
        model: 'PHPExtJS.model.User',
        storeId:'Usr',
        autoLoad: false,
        remoteFilter: true,
        autoSync: true,
        proxy: {
            type: 'rest',
            
            api: {
                create: 'User/create', 
                read: 'User/read',
                update: 'User/update',
                destroy: 'User/delete',
            },
            
            listeners: {
                    exception: function(proxy, response, options){
                        Ext.MessageBox.alert('Warning!', response.status + ": " + response.statusText + " " + response.responseText + "!"); 
                        //Ext.MessagesBox.alert('Error', response.status + ": " + response);
                        //console.log(response);
                    }
                },
            
            reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success'
            },
            
            writer: {
                type: 'json',
                writeAllFields: true,
                encode: true,
                root: 'data'
            },
            
            // sends single sort as multi parameter
            simpleSortMode: true,
    
            // Parameter name to send filtering information in
            //filterParam: 'query',
    
            // The PHP script just use query=<whatever>
            
            encodeFilters: function(filters) {
                return filters[0].value;
            }
            
            
        }
    });

    Views :
    Code:
    Ext.define('PHPExtJS.view.User._grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.userGrid',
        requires: [
            'Ext.toolbar.Paging',
            'Ext.grid.RowNumberer',
            'Ext.grid.*',
            'Ext.data.*',
            'PHPExtJS.store.User',
        ],
        iconCls: 'icon-grid',
        title: 'User Management',
        store: 'Usr',
        loadMask: true,
        
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                columns: [
                    {
                        xtype: 'rownumberer',
                        width: 50,
                        sortable: false,
                        flex: false,
                    },
                     
                    {
                        dataIndex: 'id',
                        text: 'ID',
                        flex:true,
                         
                        hidden:true,
                         
                        
                    },
                     
                    {
                        dataIndex: 'username',
                        text: 'USERNAME',
                        width:100,
                         
                        
                    },
                     
                    {
                        dataIndex: 'name',
                        text: 'NAME',
                        flex:true,
                         
                        
                    },
                                    
                ],
                viewConfig: {
                    emptyText: '<h3><b>No data found</b></h3>'
                },
                listeners: {
                    viewready: function() {
                        this.store.load();
                    },
                },
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            'Search', {
                                xtype: 'textfield',
                                name: 'searchfield'
                            },
                            {
                                xtype: 'button',
                                action: 'search',
                                iconCls: 'icon-save',
                                text: 'Search'
                            },
                            {
                                xtype: 'button',
                                action: 'delete',
                                iconCls: 'icon-add',
                                text: 'Delete'
                            },
                            {
                                xtype: 'button',
                                action: 'create',
                                iconCls: 'icon-add',
                                text: 'Create'
                            }
                        ]
                    },
                    {
                        xtype: 'pagingtoolbar',
                        dock: 'bottom',
                        displayInfo: true,
                        emptyMsg: 'No data to display',
                        store: this.store,
                    }
                ]
    
            });
    
            me.callParent(arguments);
        }
    });
    View.Main :
    Code:
        var layoutExamples = [];
        Ext.Object.each(getBasicLayouts(), function(name, example) {
            layoutExamples.push(example);
        });/*
            Ext.Object.each(getCombinationLayouts(), function(name, example) {
            layoutExamples.push(example);
        });*/
        
        var contentPanel = Ext.create('Ext.panel.Panel',{
             id: 'content-panel',
             region: 'center', // this is what makes this panel into a region within the containing layout
             layout: 'card',
             margins: '2 5 5 0',
             activeItem: 0,
             border: false,
             items: layoutExamples,
             renderTo: Ext.getBody()
        });
        
        var storeMaster = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true
            },
            proxy: {
                type: 'ajax',
                url: 'app/view/layout/tree-data.json'
            }
        });
            
        var treePanel = Ext.create('Ext.tree.Panel', {
            id: 'tree-panel',
            title: 'Navigation',
            region:'north',
            split: true,
            height: 700,
            minSize: 150,
            rootVisible: false,
            autoScroll: false,
            store: storeMaster
        }); 
        
            treePanel.getSelectionModel().on('select', function(selModel, record) {
            if (record.get('leaf')) {
                Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
                /*
                 if (!detailEl) {
                    var bd = Ext.getCmp('details-panel').body;
                    bd.update('').setStyle('background','#fff');
                    detailEl = bd.createChild(); //create default empty div
                }
                detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
            */
            }
        });
    
    Ext.define('PHPExtJS.view.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'Ext.tab.Panel',
            'Ext.layout.container.Border',
            'Ext.util.History',
            'PHPExtJS.view.User._grid',
            'PHPExtJS.view.Login',
            'PHPExtJS.store.User'
        ],
        xtype: 'app-main',
        layout: {
            type: 'border',
            default: 'anchor'
        },
        items: [ {                   
                        xtype: 'panel',
                        region: 'north',
                        title:"<img src='resources/themes/images/mppk.png'></img>",
                        height: 80,
                        margins: '2 5 0 5'
                    },{
                        layout: 'border',
                        id: 'layout-browser',
                        region:'west',
                        border: false,
                        split:true,
                        margins: '2 0 5 5',
                        width: 250,
                        minSize: 100,
                        maxSize: 500,
                        items: [treePanel]
                    },
                contentPanel
                ]
                      
    });
    function for content :
    Code:
    function getBasicLayouts() {
        // This is a fake CardLayout navigation function.  A real implementation would
        // likely be more sophisticated, with logic to validate navigation flow.  It will
        // be assigned next as the handling function for the buttons in the CardLayout example.
        
    
        var cardNav = function(incr){
            var l = Ext.getCmp('card-wizard-panel').getLayout();
            var i = l.activeItem.id.split('card-')[1];
            var next = parseInt(i, 10) + incr;
            l.setActiveItem(next);
            Ext.getCmp('card-prev').setDisabled(next===0);
            Ext.getCmp('card-next').setDisabled(next===2);
        };
        
        return {
            /*
             * ================  Start page config  =======================
             */
            // The default start page, also a simple example of a FitLayout.
            
     start: {
                xtype: 'component',
                id: 'start-panel',
                title: 'Start Page',
                layout: 'fit',
               // bodyStyle: 'padding:25px',
                autoEl: {
                            tag: "iframe",
                            src: "site/welcome"
                        }
            },
     
            /*
             * ================  User Management  =======================
             */
            
            user: { 
                    xtype:'container',               
                    layout:'fit',  
                    id: 'user-panel',                                    
                    items:[{xtype:'userGrid'}]
                },
    }
    the problem is,, if I put xtype:'userGrid' into function content I get TypeError: store is undefined, but if I put xtype:'userGrid' Into class view.Main its working good.

    Please Help,,

    Regards,
    Toffan


  2. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    146
    Answers
    9

    Default

    I would try to use "me.store" - rather than "this.store".

    In a handler function for example - "this" might be set to something different...

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    64
    Answers
    6

    Default

    have listed the store in your controller? normally that error happens when the store is not part of StoreManager.
    just put an array in your controller
    Code:
    stores:[
       'User' 
    ]
    this would fix your issue.
    a good way to test that is going to the console and typing Ext.StoreManager.get('User') and if its undefined then it means you forgot to add it to your array

  4. #4
    Sencha User
    Join Date
    Jul 2014
    Posts
    2

    Default

    the controller have been listed in my controller,, this my controller code :
    Code:
    Ext.define('PHPExtJS.controller.UserController', {
        extend: 'Ext.app.Controller',
        requires: [
            
        ],
        stores: [
            'User',
        ],
        models: ['User'],
        views: ['User._grid'],
        init: function() {
    
            this.control({
                'userGrid dataview': {
                    itemdblclick: this.actionDbClick
                },
                'userGrid button[action=delete]': {
                    click: this.actionDelete
                },
                'userGrid button[action=create]': {
                    click: this.actionCreate
                },
                'userForm button[action=save]': {
                    click: this.actionSave
                },
                'userForm button[action=cancel]': {
                    click: this.actionCancel
                },
                'userGrid button[action=search]': {
                    click: this.actionSearch
                },
                'userForm button[action=reset]': {
                    click: this.actionReset
                }
            });
    
        },
        refs: [
            {
                ref: 'userGrid',
                selector: 'grid',
                //xtype: 'gridpanel'
            }
        ],
        actionDbClick: function(dataview, record, item, index, e, options) {
            var formUser = Ext.create('PHPExtJS.view.User._form');
    
            if (record) {
    
                formUser.down('form').loadRecord(record);
    
            }
        },
        actionUpdate: function(dataview, record) { //function(grid, record) {
            var formUser = Ext.create('PHPExtJS.view.User._form');
    
            if (record) {
    
                formUser.down('form').loadRecord(record);
    
            }
        },
        actionCreate: function(button, e, options) {
            this.actionUpdate();
        },
        actionSave: function(button) {
    
            var win = button.up('window'),
                    form = win.down('form'),
                    record = form.getRecord(),
                    values = form.getValues(false, false, false, true);
    
            var isNewRecord = false;
    
            if (values.id != '') {
    
                record.set(values); //baris untuk menyimpan
            } else {
                
                record = Ext.create('PHPExtJS.model.User');          
                record.set(values);
                this.getUserStore().add(record);
                isNewRecord = true;
            }
    
            win.close();
    
        },
        actionDelete: function(button) {
    
            var grid = this.getUserGrid();
            var record = grid.getSelectionModel().getSelection();
            var store = this.getUserStore();
    
            store.remove(record);
    
            this.getUserStore().load();
        },
        actionReset: function(button, e, options) {
            var win = button.up('window'),
                    form = win.down('form');
            form.getForm().reset();
        },
        actionCancel: function(button, e, options) {
    
            var win = button.up('window'),
                    form = win.down('form');
            form.getForm().reset();
            win.close();
    
        },
        actionSearch: function(button) {
    
            var win = button.up('window'),
                    form = win.down('textfield'),
                    grid = win.down('grid'),
                    values = form.getSubmitValue();
    
            grid.getStore().load({params: {q: values}});
    
        },
    });
    when I typing Ext.StoreManager.get('User') the result is undifined.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •