extjs - Extjs 4.1 - 如何使用 UX 组件列

Question

我在http://skirtlesden.com/ux/component-column 看到教程
我做了一个演示项目，比如

演示
|-index.html
| -Component.js
|-CTemplate.js

这是我的 index.html

    Ext.Loader.setConfig({enabled: true});
    Ext.require([
        'Component'
    ]);

Ext.onReady(function() {

    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        title:'Straw Hats Crew',
        width:500,
        height:180,
        stripeRows: true,
        renderTo: Ext.getBody(),
        store: Ext.create('Ext.data.ArrayStore', {
            fields: [
                {name: 'name'}
            ],
            data: [
                ['Monkey D Luffy'],
                ['Roronoa Zoro'],
                ['Sanji'],
                ['Usopp'],
                ['Nami']
            ]
        }),
        columns: [
            {
                header: 'Name', 
                width: 100, 
                dataIndex: 'name',
                xtype: 'componentcolumn', 
                renderer: function(name, meta, record) {
                    return { 
                        value: name, 
                        xtype: 'textfield', 
                        listeners: { 
                            inputEl: { 
                                keydown: function(ev) { 
                                    ev.stopPropagation(); 
                                } 
                            } 
                        } 
                    }; 
                } 
            }
        ]
    });
});

我的 Component.js

Ext.define('Skirtle.grid.column.Component', {
    alias: 'widget.componentcolumn',
    extend: 'Ext.grid.column.Column',
    requires: ['CTemplate'], // modify
    ...

我的 CTemplate.js

Ext.define('Skirtle.CTemplate', {
    extend: 'Ext.XTemplate',
    ....

但没有任何工作？如何解决这个问题谢谢

Answer 1

您需要使用 Firebug 查看您的页面并查看加载了哪些脚本。我怀疑您可能需要在 Loader 配置中设置组件脚本的路径。像这样：

Ext.Loader.setConfig({
    enabled : true, 
    paths: {
        'Ext.ux': 'js/extjs/ux',           
        'Skirtle.grid.column.Component':'js/extjs/ux/SkirtleComponentColumn.js', 
        'Skirtle.CTemplate'            :'js/extjs/ux/SkirtleCTemplate.js'
    }
});
Ext.require([
    'Skirtle.grid.column.Component'
]);

如果您在 firebug NET 选项卡中看到它尝试加载这些文件但转到错误的位置导致 404，请修改您的路径。