Form wouldn't display when Creating a Textfield in Sencha extjs

Question

Hello i created a code from my sencha mvc extjs i do have a grid which suppose to have 5 columns company, website, username, tabs, login button

View Source Code:

    Ext.define('OC.view.Container', {
    extend: 'Ext.container.Viewport',
    layout: 'border',

    initComponent : function(){     
        document.getElementById('id').value = "John";
        this.items = [{
            xtype: 'panel',
            region: 'north',
            height: 25,
            bodyPadding : 5,
            baseCls : 'x-plain',
            html : 'Welcome ' + document.getElementById('id').value + '!'
        }, {
            xtype: 'panel',
            region: 'center',
            layout: 'fit',
            items: [{
                xtype : 'credentials',
                border: false
            }]
        }];

        this.callParent(arguments);
    }

});

Ext.define('OC.view.Credentials', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.credentials',
    store : 'Credentials',

    initComponent : function(){

        this.columns = [{
            xtype : 'rownumberer'
        }, {
            text : 'Company',
            dataIndex : 'company',
            flex : 1
        }, {
            text : 'Website',
            dataIndex : 'website',
            flex : 1
        }, {
            text : 'Username',
            dataIndex : 'username'
        }, {
            text : 'Tabs',
            dataIndex : 'id',
            width : 30,
            flex: 1,
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }, {
            text : 'Login',
            xtype : 'actioncolumn', 
            width : 70,
            items : [
            {
                icon : '../js/main/login.png',
                tooltip : 'Click to Login',
                handler : function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);                  
                    this.url = rec.get('website');
                    this.cTabs = rec.get('id');
                    var data = {
                        username : '',
                        password : '',
                        company : rec.get('company')
                    };

                    for(var i = 1; i <= this.cTabs; i++) 
                    {
                        chrome.tabs.create({
                            url : this.url,
                            selected : true 
                        }, 
                        function(tab) {
                            var tabID = tab.id;
                            chrome.tabs.executeScript(null, {                           
                                file: 'js/main/funct.js',
                                code : 'func.login('+ JSON.stringify(data) +')'
                                //runAt : 'document_idle'
                            });
                            /*
                            chrome.tabs.update(tab.id, {
                            selected : true
                            }); */
                        });
                    }
                }
            }]
        }], <-- starts
        selType : 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit : 1
            })
        ],
        height : 200,
        width : 400,
        renderTo : Ext.getBody();
        this.callParent(arguments); <-- end
    }    
});

Model Source Code:

    Ext.define('OC.model.Credentials', {
    extend: 'Ext.data.Model',
    fields: [{
        name : 'website',
        type : 'string'
    }, {
        name : 'username',
        type : 'string'
    }, {
        name : 'company',
        type : 'string' 
    }, {
        name : 'id',
        type : 'integer'    
    }]
});

Ext.define('OC.store.Credentials', {
    extend: 'Ext.data.Store',
    model : 'OC.model.Credentials',
    queryMode : 'remote',
    proxy : {
        type : 'ajax',
        url: 'http://localhost/oc2/user_info/company_credentials',
        reader: {
            type: 'json',
            root: 'data'
        }       
    },
    autoLoad : true
});

Controller Source Code:

Ext.define('OC.controller.Credentials', {
    extend: 'Ext.app.Controller',

    models: [
        'Credentials'
    ],

    stores: [
        'Credentials'
    ],

    views : [
        'Credentials'
    ],

    init : function() {
        this.control({
            'credentials' : {
                render : this.onCredentialsRendered         
            }
        })
    },

    onCredentialsRendered : function(grid){
        grid.store.loadPage(1);
    }
});

if i take that code with from start to end code at the bottom and end it with a semi-column it then displays it means i do have errors on that code but as said in the reference i have studied this one here --> http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.plugin.CellEditing

its pretty much the same i check the codes 3 even try to transfer it for maybe some debug like putting that group of codes start to end on top next to the "tabs" function cause i wanted the "tabs" field in the grid to be editable or maybe a textfield / textbox can you help me whats wrong with my codes?

Answer 1

The reason this doesn't work is that you mix up the config and initComponent which is a function.

Columns is a grid config and does not need to be included in the initComponent function. I don't see the need for initComponent at all, but maybe I'm missing something. I would simplify your definition to :

Ext.define('OC.view.Credentials', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.credentials',
    store : 'Credentials',
// remove initComponent
    columns: [{
        xtype : 'rownumberer'
    }, {
// ...
    }],
    selType : 'cellmodel',
    plugins: [{ // You don't need to instantiate cell editor. 
        ptype: 'cellediting',
        clicksToEdit : 1
    }],
    height : 200,
    width : 400,
    renderTo : Ext.getBody();
})