1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default Custom editor grid header with template.

    Custom editor grid header with template.


    Hi all

    I`m using EditorGridPanel and a GroupingStore. I want make a editor in grid's header like in ext simple tasks example. I copied the code from there, but it isn't working for me.

    here ar the template and fields that i want to put in my template
    Code:
     var ntTitle = new Ext.form.TextField({
         renderTo: 'new-task-title',
         emptyText: 'Add a task...'
     });
     var ntCat = new Ext.form.ComboBox({
         renderTo: 'new-task-cat',
         disabled:true,
         displayField: 'text',
         triggerAction: 'all',
         mode:'local',
         selectOnFocus:true,
         listClass:'x-combo-list-small'
         //listeners: comboEvents
     });
     var ntDue = new Ext.form.DateField({
         renderTo: 'new-task-due',
         value: new Date(),
         disabled:true,
         format : "m/d/Y"
     });
     var headerTpl = new Ext.Template(
         '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
         '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
         '<tbody><tr class="new-task-row">',
             '<td><div id="new-task-icon"></div></td>',
             '<td><div class="x-small-editor" id="new-task-title">{title}</div></td>',
             '<td><div class="x-small-editor" id="new-task-cat"></div></td>',
             '<td><div class="x-small-editor" id="new-task-due"></div></td>',
         '</tr></tbody>',
         "</table>",
    
         
     );
    here is the code for editor grid's view
    Code:
    view : new Ext.grid.GroupingView({
       groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "Uzdevumi" : "Uzdevums"]})',
       // atbild par bold tekstu taaskiem, kad tie nav lasiiti
       getRowClass: function(record, rowIndex, rp, ds){
           var rowData = record.data;
           if(rowData.owner_id != rowData.current_user) {
              if(rowData.is_red == 0) {
                 return 'bold_row';
              }
           }
           else {
              if(rowData.owner_is_red == 0) {
                 return 'bold_row';
              }
           }
       },
       forceFit: true, // izplesh grida kollonas pilnaa platumaa
       // Zanisimo
       templates: {
           header: this.headerTpl
       }
    })
    If I compile the code like above, I get this error in console: ct is null

    Problem is with the renderTo because when I comment it out I don't get any errors.

    I think that the best practice would be:

    Code:
    headerTpl.compile();
    headerTpl.apply({field_name: ntTitle});
    but this doesn't work either.

    Any help appreciated.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default


    i think that better tittle for this is how to pass variables or objects to template?

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Using renderTo will immediately render the components to the specified elements, but your grid header hasn't rendered yet!

    Override the gridview afterRenderUI and refreshHeaders methods to (re)create your fields.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Using renderTo will immediately render the components to the specified elements, but your grid header hasn't rendered yet!

    Override the gridview afterRenderUI and refreshHeaders methods to (re)create your fields.
    Is there any way to get those objects in the template before I add template into grid? Somehow reference objects into the template?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No. A template only produces a HTML string. You have to wait until that HTML is rendered before you can render any components to it.

    There is a user extension that renders search fields in the header. Maybe you could borrow from that.

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default


    Thank you very much for your help.

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default


    well I am still stuck in to this.

    Code:
    this.grid.on('render',function(){
          var grid = this.grid;
          var filterDivId = "new-task-title";
          var editor = new Ext.form.TextField({
         //renderTo: 'new-task-title',
             xtype:'textfield',
             emptyText: 'Add a task...'
          });
          editor.render(filterDivId);
          },this);
    I'm trying the code above and still the textfield doesn't get rendered. I tried also afterrender and that didn't change anything. You said that I need to override refreshHeaders methode. How can I do that? I hopu you can help me because I have been stuck in to this problem for whole day.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, you can't use the render event. The grid view hasn't been rendered yet then.

    As I said, you'll have to override afterRenderUI (or use the viewready event).

    But you'll also have to override updateHeaders, which is called when the header needs rerendering.

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Zanisimo is on a distinguished road

      0  

    Default


    I just resolved this problem. Actually it wasn't that hard. Problem was that the grid wasn't rendered yet when I tried to add fields to it. I resolved the problem by simply adding delay to render listener and after that delay I called function that rendered fields to grid's header.

    listeners code:
    Code:
    render: {
       delay: 500,
       fn: this.applyFormFields,
        scope: this
    }
    applyFormFields code:
    Code:
    applyFormFields: function(){
          var grid = this.grid;
          var filterDivId = "new-task-title";
          var editor = new Ext.form.TextField({
             xtype:'textfield',
             emptyText: 'Add a task...'
          });
          editor.render(filterDivId);
       }
    In my application I also have a AJAX call that reloads store data for the grid. I had a problem that after reloading store the fields didn't get rendered to grid's header. I managed to resolve this by simply calling applyFormFields function after I reloaded the store and fields got rendered correctly.

    I hope that this thread will help others with a similar problems.

    And thanks again to Condor for help.

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    55
    Vote Rating
    1
    extjs.mscit is on a distinguished road

      0  

    Default Is it possible to do same in Extjs 4.1

    Is it possible to do same in Extjs 4.1


    Hi, I did same in Extjs 3.4, and that works fine. Now I want same functionality in extjs 4.1 as well. Please, any one help me how to do that.
    Many Thanks,

Similar Threads

  1. [Solved] Grid column header template problem
    By pouniok in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 11 Apr 2009, 8:23 AM
  2. Custom header in Grid
    By pundit in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Mar 2009, 2:03 PM
  3. custom header on grid
    By teddyjas in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 9 Oct 2008, 5:31 PM
  4. Custom grouping template on grid
    By vk214 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Aug 2008, 7:13 AM
  5. Editor / Property Grid throws errors after using custom editor
    By para in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 15 Jun 2007, 9:19 AM

Thread Participants: 2

Tags for this Thread