在 Sencha extjs 中创建文本字段时，表单不会显示

Question

您好，我从我的 sencha mvc extjs 创建了一个代码，我确实有一个网格，假设有 5 列公司、网站、用户名、选项卡、登录按钮

查看源代码：

    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
    }    
});

模型源代码：

    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
});

控制器源代码：

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);
    }
});

如果我在底部使用从开始到结束的代码并以半列结束它然后显示这意味着我在该代码上确实有错误，但正如参考文献中所说，我在这里研究了这个 - -> http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.plugin.CellEditing

它几乎相同，我检查了代码 3 甚至尝试传输它以进行一些调试，例如将那组代码开始在“选项卡”功能旁边的顶部结束，因为我想要“选项卡”字段中的网格是可编辑的，或者可能是一个文本字段/文本框你能帮我我的代码有什么问题吗？

Answer 1

这不起作用的原因是你混淆了配置和 initComponent ，这是一个函数。

Columns 是一个网格配置，不需要包含在 initComponent 函数中。我根本看不到对 initComponent 的需求，但也许我遗漏了一些东西。我会将您的定义简化为：

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();
})