Extjs 4.1 - 如何使用 UX 组件列

Posted 2023-02-26

【中文标题】Extjs 4.1 - 如何使用 UX 组件列

【英文标题】：Extjs 4.1 - How to work with UX Component Column

【发布时间】：2013-08-13 01:46:38

【问题描述】：

我在 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(); 
                                 
                             
                         
                    ; 
                 
            
        ]
    );
);

我的组件.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',
    ....

但是没有任何效果？如何解决这个问题谢谢

【参考方案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，请修改您的路径。