1. #111
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    hi,

    here is my code:

    PHP Code:
    columns: {
                    
    items: [
                        {
                            
    dataIndex"id",
                            
    hidden:true
                        
    },{
                            
    dataIndex"name"
                        
    },{
                            
    xtype'componentcolumn',
                            
    dataIndex'value'
                            
    ,rendererExt.Function.bind(this.renderCellthis)
                        }
                    ],
                    
    defaults: {
                        
    flex1
                    
    }
                }
    ..............



    this.renderCell = function(valmetarec) {
                
    console.log(val);
                if(
    rec.get('type')=='date'){
                    if(
    Ext.isDate(val)){
                        return 
    Ext.Date.format(val,'d.m.Y');
                    }
                    
                };
                if(
    rec.get('type')=='checkbox'){
                    return { 
                        
    checkedval
                        
    xtype'checkbox'
                        
    ,margin'0px 0px 0px 0px'
                        
    ,handler: function(checkboxchecked) {
                            
    rec.set('value'checked);
                        }
                    }; 

                }
                return 
    val;
            }; 

    the error comes when i click the checkbox (the value will be saved without problems) at this point: ext-all-debug.js (Zeile 30611)

    thx!

  2. #112
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    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

      0  

    Default


    When the checkbox is clicked it calls the handler function and then updates its dirtyCls. In this case the handler function is causing a grid refresh, which destroys the checkbox and creates a new one. The attempt to update the dirtyCls is then failing because the checkbox has been destroyed.

    You can induce the same error with just a checkbox:

    Code:
    Ext.widget({
        renderTo: Ext.getBody(),
        xtype: 'checkbox',
    
        handler: function(checkbox) {
            checkbox.destroy();
        }
    });
    There are many different ways to work around this. Here are a couple:

    Code:
    return {
        checked: val,
        onDirtyChange: Ext.emptyFn, // <- override the problematic method
        xtype: 'checkbox',
    
        handler: function(checkbox, checked) {
            rec.set('value', checked);
        }
    };
    Code:
    return {
        checked: val,
        xtype: 'checkbox',
    
        handler: function(checkbox, checked) {
            // Add a delay to allow the click handling to finish before refreshing the grid
            Ext.defer(function() {
                rec.set('value', checked);
            }, 10);
        }
    };

  3. #113
    Sencha User
    Join Date
    Mar 2013
    Posts
    13
    Vote Rating
    -1
    rt.karthik87 is an unknown quantity at this point

      0  

    Default Tree Panel with Component column

    Tree Panel with Component column


    Hi

    It looks good. But i need something different. The same component column that watn to be available in tree column. I want a something like this.
    {
    xtype : 'treecolumn',
    renderer :function(value....){
    return : {

    xtype : 'combobox',
    select:function(){
    record.set('','');

    }
    }

    }

    Is it possible to create components in tree column. I am surfing in net for the past few weeks. Please help me in this regard.

  4. #114
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    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

      0  

    Default


    You could get a similar effect by putting the components in a different column of your tree but there's nothing to support injecting them into the treecolumn itself. I've not seen any UX to do that.

    From a quick look at the code for treecolumn it doesn't look like it would be too difficult to get something to work. I'd try swapping in a CTemplate for the cellTpl and provide a renderer that return components. Add a bit of destruction management and that should be about it.

  5. #115
    Sencha User
    Join Date
    Mar 2013
    Posts
    13
    Vote Rating
    -1
    rt.karthik87 is an unknown quantity at this point

      0  

    Default


    Hi,


    I tried using the component column something like this in my code

    columns: [
    {
    xtype: 'componentcolumn',
    dataIndex : 'add',
    text: 'Add',
    flex: 0.25,
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    return {
    checked: value,
    xtype: 'checkbox',
    listeners : {
    'change' :function(editChkBoxId, newValue, oldValue, eOpts){
    record.set('edit', newValue);
    record.set('add', newValue);
    }
    }
    };
    }
    },
    {
    xtype: 'componentcolumn',
    dataIndex : 'edit',
    text: 'Edit',
    flex: 0.25,
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    return {
    checked: value,
    xtype: 'checkbox',
    listeners : {
    'change' :function(editChkBoxId, newValue, oldValue, eOpts){
    record.set('edit', newValue);
    record.set('add', newValue);
    }
    }
    };
    }
    }


    if i tried to set the value in the record while changing the checkbox i am getting B is null error. Whats the reason am getting this kind of error.

  6. #116
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    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

      0  

    Default


    @rt.karthik87. Please see this earlier post:

    http://www.sencha.com/forum/showthre...292#post967292

  7. #117
    Sencha User
    Join Date
    Mar 2013
    Posts
    13
    Vote Rating
    -1
    rt.karthik87 is an unknown quantity at this point

      0  

    Default


    @skirtle thanks a lot. it works fine.
    I am expecting the tree column which supports different renderer. Please see the earlier post.

  8. #118
    Sencha User
    Join Date
    Mar 2013
    Posts
    13
    Vote Rating
    -1
    rt.karthik87 is an unknown quantity at this point

      0  

    Default


    Hi,

    in your website mentioned as your component column will be used only in small grid where performance is not an issue. Small grid means can you tell me the exact count of records it may support. For example if am having 500 records whether it will affect the performance?

  9. #119
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    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

      0  

    Default


    It depends on too many things for me to put a figure on it: browser, OS, hardware, other columns, etc.

    However, I would expect 500 rows to be a struggle. The only way to be sure is to try it yourself. Even if the initial rendering performance is acceptable you may find the large DOM cripples subsequent layouts.

  10. #120
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Raleigh, NC
    Posts
    145
    Vote Rating
    5
    qooleot is on a distinguished road

      0  

    Default



    "For example if am having 500 records whether it will affect the performance?"


    Yes, 500 rows is generally slow (especially for older computers). If your target is chrome/ff/safari on modern computers, that is about the limit and possible, but really no more.

    I tried a single componentcolumn with a button+menu on 3,000 rows and it takes 2 minutes on chrome on a new computer, and IE7 gets crushed (does not render in 5 minutes). I fixed my issue by paginating the grid to 100 rows and it then worked perfectly so thats a possible suggestion for a large row count.