Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: How to render extjs component in Grid renderer,

  1. #1

    Default Answered: How to render extjs component in Grid renderer,

    How to render extjs component in Grid ,
    tried with column component creating performance issue . is there any right way render
    extjs component in grid render

  2. A much faster way would be to use domQuery. Here is the basic concept:

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    var nameRenderer = function(){
        return '<div ext-xtype="textfield"></div>';
        
    }
    
    
    var simpsonPanel = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name', renderer:nameRenderer },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        listeners:{viewready:function(view){
             var els = view.el.query('div[ext-xtype]');
            Ext.each(els, function (domEl) {
                var xtype = Ext.get(domEl).getAttribute('ext-xtype');
                Ext.widget(xtype,{renderTo:domEl});
            }, this);
            view.up('viewport').doLayout();
            
            
        }}
    });
    Ext.application({
        name : 'Fiddle',
        
        launch : function() {
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'fit'
                    
                },
                items:   simpsonPanel
                
            });
        }
    });

  3. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Can you provide an example of what you are trying to do?
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  4. #3

    Default

    trying to render combobox and checkbox using "componentcolumn" extension.. facing slowness in grid rendering if row count more than 50 see the example in below link http://skirtlesden.com/ux/component-column

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    A much faster way would be to use domQuery. Here is the basic concept:

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    var nameRenderer = function(){
        return '<div ext-xtype="textfield"></div>';
        
    }
    
    
    var simpsonPanel = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name', renderer:nameRenderer },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        listeners:{viewready:function(view){
             var els = view.el.query('div[ext-xtype]');
            Ext.each(els, function (domEl) {
                var xtype = Ext.get(domEl).getAttribute('ext-xtype');
                Ext.widget(xtype,{renderTo:domEl});
            }, this);
            view.up('viewport').doLayout();
            
            
        }}
    });
    Ext.application({
        name : 'Fiddle',
        
        launch : function() {
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'fit'
                    
                },
                items:   simpsonPanel
                
            });
        }
    });

  6. #5
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Unfortunately, we do not provide support for user extensions. I would contact the author to get support if you're experiencing issues with the UX.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  7. #6

    Default

    how can I pass rendering record to the render component .. and viewready is not called on column on,off

    example: tried data record but it could not able to decode
    return '<div data:record = record ext-xtype="custom component"></div>';

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    It would be better to access the record using rowIndex. Modify the renderer as follows:

    Code:
    var nameRenderer = function(value, metaData, rec, rowIndex, colIndex, store){
        return '<div ext-xtype="textfield" recindex=' + rowIndex+ '></div>';
        
    }
    And then, while plugging in the Ext components, in the viewready event:

    Code:
    listeners:{viewready:function(view){
             var els = view.el.query('div[ext-xtype]');
            
            Ext.each(els, function (domEl) {
                var xtype = Ext.get(domEl).getAttribute('ext-xtype');
                var recIndex = Ext.get(domEl).getAttribute('recindex');
                var dataRec =  view.getStore().getAt(recIndex);
                Ext.widget(xtype,{renderTo:domEl, dataRec:dataRec});
            }, this);
          
            
            
        }}

  9. #8
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    I quite like this approach but I'm not sure it'll be much faster. Rendering 50 comboboxes takes time no matter how you do it.

    You also need to consider sizing and destroying the child components, my UX handles these aspects for you.

    You mentioned rendering checkboxes. I definitely wouldn't use component column for that, I'd use check column. If you need some cells in the same column to contain checkboxes and some to contain comboboxes then I'd still use the mark-up approach used by check column to render the checkboxes rather than trying to force a checkbox component into the cell. You should be able to mix approaches with a component column.

    Alternatively, if you're rendering both components into the same cell using a wrapper container then you should give careful attention to the configuration of the layout of the container. That can make a big difference to the performance. A bit of profiling should give you a guide as to whether that is something worth pursuing.

    If you skim through the relevant forum thread for my UX you'll find several discussions about performance and you may find one of them fits your scenario. If your grid has a vertical scrollbar then it should be possible to use the buffered rendering plugin on the grid - that's often the simplest way to improve performance.

  10. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    @Skirtle.. looks like you are right. There doesn't seem to be much performance difference. I created two fiddles:


    https://fiddle.sencha.com/#fiddle/pvq (with component column)

    https://fiddle.sencha.com/#fiddle/pvp (without)

    domQuery method seems only slightly faster. Although I am not sure OP is trying to put more config options to the components and that is creating performance issues.

  11. #10

    Default

    Actually I am trying to render form contains checkbox, textfield & dropdown different renderer for multiple field ... I accept it works fine for checkbox alone ... could you please give clue on it .. what could be a issue ?

Page 1 of 2 12 LastLast

Similar Threads

  1. ExtJs Grid populating a column through ajax in renderer
    By kannan.devarajan in forum Sencha Architect 3.x: Q&A
    Replies: 1
    Last Post: 2 Apr 2015, 8:01 PM
  2. Replies: 1
    Last Post: 12 Dec 2014, 1:41 PM
  3. Replies: 1
    Last Post: 8 Apr 2014, 10:16 AM
  4. extjs 2.3 grid columns renderer
    By zbeckerman in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 30 Mar 2010, 4:17 PM
  5. Grid Renderer to Render Buffered Image
    By MtAiryEd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Jan 2010, 12:08 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •