CODEWITHSUNDEEP
extjsextjs4.1
DeLe
DeLe

Reputation: 2480

Extjs 4.1 - How to work with UX Component Column

I see tutorial at http://skirtlesden.com/ux/component-column
And i make a demo project like

demo
|-index.html
|-Component.js
|-CTemplate.js

Here is my 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(); 
                                } 
                            } 
                        } 
                    }; 
                } 
            }
        ]
    });
});

My Component.js

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

My CTemplate.js

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

But nothing working? how to fix this problem thanks

Upvotes: 1

Views: 1335

Answers (1)

dbrin
dbrin

Reputation: 15673

You need to take a look at your page with Firebug and see which scripts were loaded. I suspect you may need to set path to your Component script in the Loader config. Like this:

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'
]);

Modify your path if you see in the firebug NET tab that it tries to load these files but going to the wrong location resulting in 404.

Upvotes: 2

Related Questions