ExtJS controller probelem. Uncaught TypeError: Object [object Object] has no method 'setSortState'

Question

T writing code using ExtJS4.0.1, MVC architecture. And when I develop main form I meet problem with search extension for web site.

When I was trying to create new widget in controller, I need render result in subpanel. and so when I write sample code I meet following problem:

**Uncaught TypeError: Object [object Object] has no method 'setSortState'**

I cannot understand why it gives that error message. I need some help to resolve that problem.

Below I want to show my code:

//Panel which is showing to user

    Ext.define('Semantics.view.main.menuView', {
        extend: 'Ext.panel.Panel',
        layout: 'fit',
        alias: 'widget.Menu',
        title: "",
        tbar: [
            {
//search field
                        name:'mainSearchText',
                        id:'mainSearchText',
                        xtype: 'textfield',
                        defaultValue: 'Search',
                        height: 20
            },
            {
                name:'mainSearchButton',
                id:'mainSearchButton',
                xtype: 'button',
                text: 'Find',
                height: 20
            }
        ]
    });


//controller for search request
    Ext.define('Semantics.controller.main.mainController', {
        extend: 'Ext.app.Controller',
        views: ['main.menuView','mainSearch.MainSearchResultForm'],
        refs: [
            { ref: 'menuPanel', selector: 'Menu' },
            { ref:'mainSearchText',selector:'#mainSearchText'},
            {ref: 'mainSearchForm',selector:'#mainSearchForm'},
            {ref:'MainSearchGrid',selector:'#MainSearchGrid'}
        ],

        init: function () {
            this.control({
                'Menu': {
                    render: this.onPanelRendered
                },
                'Menu button[name="mainSearchButton"]': {
                    click: this.onButtonClick
                }
            });
        },
        onButtonClick: function (button) {
            var me = this;
            if(button.name=="mainSearchButton") {

                        var mtextFiled = me.getMainSearchText().getValue();

                        console.log(mtextFiled);
                        Ext.Ajax.request({
                            scope: this,
                            url: 'app/mainSearchT/findText/',
                            method: 'POST',
                            params: {
                                text: me.getMainSearchText().getValue()
                            },
                            success: function (result) {
                                mainPanel = me.getMenuPanel();
                                mainPanel.removeAll(true);
                                loadingMask = new Ext.LoadMask(mainPanel, { msg: "Loading" });
                                loadingMask.show();
                                var mname = 'MainSearchResultForm';
                                var start_info_panel = Ext.widget(mname);
                                mainPanel.items.add(start_info_panel);
                                loadingMask.hide();
                                mainPanel.doLayout(); //that line gives that error
                            },
                            failure: function (result) {
                                console.log(result);
                            }
                        });

            }
        },

        onPanelRendered: function () {
        }
    });

Answer 1

I encountered the same error when I included unsupported xtype in Ext.grid.Panel columns. I had to remove the xtype, which resolved the problem.