Its.grid.column.Component

[vietits]

@Skirtle,

Thanks for your information .

[oguz.]

Hi, i try to use this plugin in my application. I need to disable the component according to the value of another column value. For example i have two columns. one is checkbox, and the other one is a combobox. if the checbox is checked combo should be active and if checkbox is not checked combo should be disabled.
I try to use cellediting plugin but it isnot running compatible with this component.
How can i disable the component according to the value of another column value?

Best Regards.
Oguz

[vietits]

Hi, i try to use this plugin in my application. I need to disable the component according to the value of another column value. For example i have two columns. one is checkbox, and the other one is a combobox. if the checbox is checked combo should be active and if checkbox is not checked combo should be disabled.
I try to use cellediting plugin but it isnot running compatible with this component.
How can i disable the component according to the value of another column value?

Best Regards.
Oguz

Below is an example that use Its.grid.column.Component that works with what you mentioned. The first field is editable by using CellEditing.

Ext.require([
    'Ext.*',
    'Its.grid.column.Component'
]);
Ext.onReady(function(){
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    var store = Ext.create('Ext.data.Store', {
        fields:['name', 'selected', 'checked'],
        data  :[
            {name: 'A', selected:1, checked: true},
            {name: 'B', selected:2, checked: false},
            {name: 'C', selected:2, checked: true},
            {name: 'D', selected:3, checked: true}
        ]
    });
 
    Ext.create('Ext.grid.Panel', {
        title: 'Component Column Demo',
        store: store,
        width: 300,
        height: 250,
        renderTo: Ext.getBody(),
        plugins: [cellEditing],
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            flex: 1,
            editor: {
                allowBlank: false
            }
        },{
            xtype: 'itscomponentcolumn',
            text : 'Combobox',
            width: 160,
            dataIndex: 'selected',
            items: function(value, record, rowIdx) {
                return { 
                    xtype: 'combobox',
                    index: rowIdx,
                    store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
                    value: value,
                    disabled: !record.get('checked'),
                    width: 130
                }; 
            }
        },{ // column with checkboxes
            xtype: 'itscomponentcolumn',
            text : 'Checkbox',
            width: 90,
            dataIndex: 'checked',
            items: function(value){
                return {
                    xtype    : 'checkboxfield',
                    name     :  'topping',
                    checked  : value,
                    listeners: {
                        change: function(field, newValue, oldValue, record, rowIdx){
                            var grid = this.up('grid');
                            var combobox = grid.down('combobox[index=' + rowIdx + ']');
                            combobox.setDisabled(!field.checked);
                        }
                    }
                };
            }
        }]
    });
});

Note: Its.grid.column.Component is a grid column that allows to display component(s) in grid cell. It does not do the role of CellEditing or RowEditing.

[kstewart]

I have what may turn out to be a simple question, but it has been plaguing me for days now. (View the attached image for reference.) I want to hide the control in position (0,0) always. Should the user insert a new row above the zeroth row (thus making the new row the zeroth row and the old zeroth row now the 1st row.) At this point I now also need to show the control for the new 1st row (which was bumped down by the insertion of the new zeroth row.) Make any sense? I basically need to be able to arbitrarily show/hide components in cells. Any help would be greatly appreciated.

Kevin

[crocop21]

I have a question
Ext.require([
'Its.grid.column.Component'
]);

I dont understand how i need to save the file Component.js because i have this error

uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Its.grid.column.Component

i have to save in the folder: Its\grid\column ?

[another_i]

I have a question
Ext.require([
'Its.grid.column.Component'
]);

I dont understand how i need to save the file Component.js because i have this error

uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Its.grid.column.Component

i have to save in the folder: Its\grid\column ?

I don't know why this ux named as Its.grid.column.Component. I rename it as Ext.ux.grid.column.Component and put it in my /ext4_ux folder: ext4_ux/grid/column/Component.js. Loader is:

Ext.Loader.setConfig({ 
    enabled: true,
    paths: {
        'App': '/app', 
        'Ext': '/ext4/src', 
        'Ext.ux': '/ext4_ux'
    } 
});

Ext.require(['Ext.ux.grid.column.Component']);

So you can use this code:

Ext.Loader.setConfig({ 
    enabled: true, 
    paths: {
        'App': '/app', 
        'Ext': '/ext4/src', 
        'Ext.ux': '/ext4/src/ux', // by default UX are here
        'Its': '/ext4/src/ux'
        // if the Component.js path is /ext4/src/ux/grid/column/Component.js
    } 
});

Ext.require(['Its.grid.column.Component']);

And thanks to author for the great UX!

[crocop21]

I don't know why this ux named as Its.grid.column.Component. I rename it as Ext.ux.grid.column.Component and put it in my /ext4_ux folder: ext4_ux/grid/column/Component.js. Loader is:

Ext.Loader.setConfig({ 
    enabled: true,
    paths: {
        'App': '/app', 
        'Ext': '/ext4/src', 
        'Ext.ux': '/ext4_ux'
    } 
});

Ext.require(['Ext.ux.grid.column.Component']);

So you can use this code:

Ext.Loader.setConfig({ 
    enabled: true, 
    paths: {
        'App': '/app', 
        'Ext': '/ext4/src', 
        'Ext.ux': '/ext4/src/ux', // by default UX are here
        'Its': '/ext4/src/ux'
        // if the Component.js path is /ext4/src/ux/grid/column/Component.js
    } 
});

Ext.require(['Its.grid.column.Component']);

And thanks to author for the great UX!

Thanks for the answer i was trying to implement the example i think i did all good, but is show in me the explorer in blank and any error in the firebug and i tried too in chrome but is the same
I am using extjs4.1, i didnt had the folder ux inside of src, and i created the folder column because didnt had inside of the folder grid. here is my code:

<!DOCTYPE html>

<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>edit</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.Loader.setConfig({
disableCaching: false,
enabled: true,
paths: {
'App': '/app',
'Ext': 'ext4/',
'Ext.ux': 'ext4/examples/ux/'
}
});

Ext.require(['Ext.ux.grid.column.Component']),

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields:['taskname', 'status', 'done', 'assignTo', 'dep', 'date', {name:'qty', type: 'int'}],
data:[
{taskname:"Task 1", status:1, done: 10, assignTo:"Scott", dep:"Manangement", date: '2012-01-01', qty:20},
{taskname:"Task 2", status:2, done: 30, assignTo:"John", dep:"Sales", date: '2012-01-12', qty:35},
{taskname:"Task 3", status:2, done: 50, assignTo:"Smith", dep:"Accounting", date: '2012-01-21', qty:12},
{taskname:"Task 4", status:3, done: 70, assignTo:"Smith", dep:"Accounting", date: '2012-01-05', qty:51}
]
});
store.load();

var panel = Ext.create('Ext.grid.Panel', {
title: 'Component Column Demo',
name : 'task',
store: store,
width: 900,
height: 950,
autoShow: true,
//renderTo: Ext.getBody(),
columns: [{
text: 'Task name',
flex: 1,
dataIndex: 'taskname'
},{ // chart column
xtype: 'itscomponentcolumn',
text : 'Chart',
width: 200,
dataIndex: 'done',
items: function(value) {
return {
xtype: 'chart',
width: 200,
height: 150,
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['gauge'],
data : [{gauge: value}],

}),

insetPadding: 25,
flex: 1,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: -10
}],
series: [{
type: 'gauge',
value: value,
field: 'gauge',
donut: false,
colorSet: ['#F49D10', '#ddd']
}]
}
}
},{ // column with a combobox
xtype: 'itscomponentcolumn',
text : 'Combobox',
name : 'status',
width: 160,
dataIndex: 'status',
items: function(value) {
return {
xtype: 'combobox',
store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']],
value: value,
width: 130
};
}
},{ // column with a spinner
xtype: 'itscomponentcolumn',
text : 'Spinner',
width: 50,
dataIndex: 'qty',
items: function(value) {
return {
xtype: 'spinnerfield',
value: value,
width: 25
};
}
},{ // column with date picker
xtype: 'itscomponentcolumn',
text : 'Date picker',
dataIndex: 'date',
width: 200,
items: function(value) {
return {
xtype: 'datepicker',
width: 190,
value: new Date(value)
};
}
},{ // column with checkboxes
xtype: 'itscomponentcolumn',
text : 'Checkbox',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3',
}]
},{ // column with two buttons
xtype: 'itscomponentcolumn',
text : 'Buttons',
align: 'center',
width: 60,
name : 'action',
sortable: false,
defaults: { // default configs applied for all items
xtype: 'button',
width: 'auto'
},
items: [{
iconCls: 'icon-modify',
action : 'modify',
tooltip: 'Modify this task'
},{
iconCls: 'icon-delete',
action : 'delete',
tooltip: 'Delete this task'
}]
}]
});

panel.render(document.body);
});
</script>
</body>
</html>

And in the extension i modified only this

Ext.define('Ext.grid.column.Component', {
extend: 'Ext.grid.column.Column',
alias : 'widget.itscomponentcolumn',

[skirtle]

I don't know why this ux named as Its.grid.column.Component. I rename it as Ext.ux.grid.column.Component

Namespaces should reflect the organisation or individual who released the code. Sencha use the Ext namespace, vietits has chosen to use the Its namespace. It's an entirely appropriate way to namespace the class and I would advise against renaming it to either the Ext or Ext.ux namespace.

Historically the Ext.ux namespace was used for user extensions but this was a mistake. It totally defeats the uniqueness requirements for namespaces and in the eyes of many users it conveys the misleading impression that code was written by Sencha. Obviously there is little that can be done to stop users writing extensions in the Ext.ux namespace but I would strongly advise against it. That namespace should only be used by Sencha for their demo components.

It certainly shouldn't be necessary to rename the class to get the dynamic loader to work. You can put the file wherever you want but it must be called Component.js. You then just need to configure the paths for the namespace. If you choose to put the file in a folder structure of grid/column/Component.js then you'll only need to configure the loader with the path for the Its namespace. If you choose to put it in a totally random folder then you'd need to configure the loader with the path for the whole Its.grid.column namespace.

[crocop21]

Well i think i did all good my folder structure, maybe is not working with extjs version 4.1??

[vietits]

@crocop21,

Its.grid.column.Component works with Ext 4.1. To use this component (and other user extensions), you should config Ext.Loader to inform Its namespace. Skirtle's suggestion is good to follow. Below is an example:
Suppose you save Component.js in the folder /Its/grid/column/Component.js, then you should config Ext.Loader as below:

Ext.Loader.setConfig({
    enabled: true, // enable dynamic loading
    paths: {
        'Its': '/Its',
       ... // other namespace
}
});

Ext.require(['Its.grid.column.Component']);