1. #11
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    @Skirtle,

    Thanks for your information .

  2. #12
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    oguz. is on a distinguished road

      0  

    Default


    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

  3. #13
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by oguz. View Post
    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.
    Code:
    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.

  4. #14
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    kstewart is on a distinguished road

      0  

    Default How can I arbitrarily hide a component within a cell?

    How can I arbitrarily hide a component within a cell?


    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
    Attached Images

  5. #15
    Sencha User crocop21's Avatar
    Join Date
    May 2012
    Posts
    65
    Vote Rating
    0
    crocop21 is an unknown quantity at this point

      0  

    Default


    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 ?

  6. #16
    Sencha User
    Join Date
    Jul 2011
    Location
    Russia
    Posts
    41
    Vote Rating
    3
    another_i is on a distinguished road

      0  

    Default


    Quote Originally Posted by crocop21 View Post
    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:

    Code:
    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:
    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!

  7. #17
    Sencha User crocop21's Avatar
    Join Date
    May 2012
    Posts
    65
    Vote Rating
    0
    crocop21 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by another_i View Post
    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:

    Code:
    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:
    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',

  8. #18
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,499
    Vote Rating
    286
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    Quote Originally Posted by another_i View Post
    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.

  9. #19
    Sencha User crocop21's Avatar
    Join Date
    May 2012
    Posts
    65
    Vote Rating
    0
    crocop21 is an unknown quantity at this point

      0  

    Default


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

  10. #20
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    @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:
    Code:
    Ext.Loader.setConfig({
        enabled: true, // enable dynamic loading
        paths: {
            'Its': '/Its',
           ... // other namespace
    }
    });
    
    Ext.require(['Its.grid.column.Component']);