Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Question [B2] Extendable TableChunker?

    [B2] Extendable TableChunker?


    I'm trying to create my own TreeView, so that I can add my own classes to the markup (for example, I need to get tree-depth-specific classes onto the rows). I've put a collectData method into my TreeView to put the node's depth onto the record, and all I need to do is get that into the template for the view.

    From what I can tell by debugging it, I need my own chunker that I can pass in the config to MyTreeView -> TreeView -> TableView, so that I can define my own metaRowTpl, so that the upstream TableView can construct the template for my items.

    Problem is, the only chunker implementation is Ext.view.TableChunker, and it's a singleton. I can't seem to extend the class, as it's a singleton. That would seem to be by design, and it's not a bad one.

    (Edit: Seems from other posts, I can extend by using Ext.getClass() on the singleton. Ok, that would seem to work, but isn't that a little bit hacky? (in order to extend a class, I need to drill into its definition to find out if it's declared as a singleton, and then extend or override that way?) Also, I would have to use Ext.extend (Ext.getClass(...)...) instead of Ext.define ({ extend...}), which is less nice.)

    In that case, to make my own chunker, I need to copy the whole TableChunker implementation and define my own with the metaRowTpl I need. I clearly prefer not to do that just to get my own metaRowTpl definition inserted into the chain.

    I'd like to suggest one of the following as regards Ext.view.TableChunker:
    1. Refactor into an AbstractChunker which the TableChunker singleton extends (and therefore so can I)
    2. Take the singleton property off the TableChunker class (what is the benefit of that here?)
    3. Tell me how I'm doing this wrong
    stevil
    Last edited by stevil; 14 Apr 2011 at 11:36 AM. Reason: I've got information, man! New $h1t has come to light!

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Cool Example code

    Example code


    I wanted to put a class with the tree node depth on each tree node's row, and limit the depth of the tree, per customer requirement. This is how I solved the problem (note, this is not a fully wired example, obviously):

    PHP Code:
    Ext.define('My.TreeChunker', {
        
    requires: ['Ext.XTemplate'],
        
    metaRowTpl: [
            
    '<tr class="' Ext.baseCSSPrefix 'grid-row {addlSelector} {[this.embedRowCls()]} tree-depth-{[this.embedDepth()]}">'// this.embedDepth() defined below
                
    '<tpl for="columns">',
                    
    '<td class="' Ext.baseCSSPrefix 'grid-cell ' Ext.baseCSSPrefix 'grid-cell-{id} {{id}-modified} {{id}-tdCls}" {{id}-tdAttr}><div unselectable="on" class="' Ext.baseCSSPrefix 'grid-cell-inner ' Ext.baseCSSPrefix 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
                
    '</tpl>',
            
    '</tr>'
        
    ],
        
    metaTableTpl: [
            
    '{[this.openTableWrap()]}',
            
    '<table class="' Ext.baseCSSPrefix 'grid-table ' Ext.baseCSSPrefix 'grid-table-resizer" border="0" cellspacing="0" cellpadding="0" {[this.embedFullWidth()]}>',
                
    '<tbody>',
                
    '<tr>',
                
    '<tpl for="columns">',
                    
    '<th class="' Ext.baseCSSPrefix 'grid-col-resizer-{id}" style="width: {width}px; height: 0px;"></th>',
                
    '</tpl>',
                
    '</tr>',
                
    '{[this.openRows()]}',
                    
    '{row}',
                    
    '<tpl for="features">',
                        
    '{[this.embedFeature(values, parent, xindex, xcount)]}',
                    
    '</tpl>',
                
    '{[this.closeRows()]}',
                
    '</tbody>',
            
    '</table>',
            
    '{[this.closeTableWrap()]}'
        
    ],
        
    constructor: function () {
            
    Ext.XTemplate.prototype.recurse = function (valuesreference) {
                return 
    this.apply(reference values[reference] : values);
            };
        },
     
        
    // embed a depth field template value into the template
        // (because this template gets created ONCE by running the template,
        //  and the result is called on each row.)
        
    embedDepth: function (valuesparentxxcount) {
            return 
    '{depth}';
        },
        
    embedFeature: function (valuesparentxxcount) {
            var 
    tpl '';
            if (!
    values.disabled) {
                
    tpl values.getFeatureTpl(valuesparentxxcount);
            }
            return 
    tpl;
        },
        
    embedFullWidth: function () {
            return 
    'style="width: {fullWidth}px;"';
        },
        
    openRows: function () {
            return 
    '<tpl for="rows">';
        },
        
    closeRows: function () {
            return 
    '</tpl>';
        },
        
    embedRowCls: function () {
            return 
    '{rowCls}';
        },
        
    openTableWrap: function () {
            return 
    '';
        },
        
    closeTableWrap: function () {
            return 
    '';
        },
        
    getTableTpl: function (cfgtextOnly) {
            var 
    tpl,
                
    tableTplMemberFns = {
                    
    openRowsthis.openRows,
                    
    closeRowsthis.closeRows,
                    
    embedFeaturethis.embedFeature,
                    
    embedFullWidththis.embedFullWidth,
                    
    openTableWrapthis.openTableWrap,
                    
    closeTableWrapthis.closeTableWrap
                
    },
                
    tplMemberFns = {},
                
    features cfg.features || [],
                
    ln features.length,
                
    0,
                
    memberFns = {
                    
    embedDepththis.embedDepth// make my function visible to the template
                    
    embedRowClsthis.embedRowCls
                
    },
                
    metaRowTpl = Array.prototype.slice.call(this.metaRowTpl0),
                
    metaTableTpl;
            for (; 
    lni++) {
                if (!
    features[i].disabled) {
                    
    features[i].mutateMetaRowTpl(metaRowTpl);
                    
    Ext.apply(memberFnsfeatures[i].getMetaRowTplFragments());
                    
    Ext.apply(tplMemberFnsfeatures[i].getTplFragments());
                    
    Ext.apply(tableTplMemberFnsfeatures[i].getTableFragments());
                }
            }
            
    metaRowTpl = new Ext.XTemplate(metaRowTpl.join(''), memberFns);
            
    cfg.row metaRowTpl.applyTemplate(cfg);
            
    metaTableTpl = new Ext.XTemplate(this.metaTableTpl.join(''), tableTplMemberFns);
            
    tpl metaTableTpl.applyTemplate(cfg);

            if (!
    textOnly) {
                
    tpl = new Ext.XTemplate(tpltplMemberFns);
            }
            return 
    tpl;
        }
    });

    Ext.define('My.TreeView', {
        
    extend'Ext.tree.TreeView',
        
    alias'widget.mytreeview',
        
    chunker: new My.TreeChunker(), // use my table chunker
     
        
    collectData: function(records) {
            var 
    data this.callParent(arguments),
                
    rows data.rows,
                
    ln rows.length,
                
    i;
            for (
    0lni++) {
                
    // set depth on row data to that of tree node
                
    rows[i].depth records[i].getDepth();
            }
            
            return 
    data;
        }
    });
     
            
    tree = new Ext.tree.TreePanel(
            {
                
    viewType'mytreeview'// specify my treeview extension
                
    borderfalse,
                
    storestore// declared elsewhere
                
    singleExpandtrue,
                
    draggablefalse,
                
    rootVisiblefalse,
                
    listeners: {
                    
    // limit tree depth by making 4th level nodes leaf nodes
                    
    'beforeitemappend': function (parentnode) {
                        if (
    parent.getDepth() === 3) {
                            
    node.data.leaf true// only display tree 4 nodes deep (customer requirement)
                        
    }
                    }
                }
            }); 

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Singapore
    Posts
    21
    Vote Rating
    1
    zhenrong is on a distinguished road

      0  

    Default


    Hi Stevil,

    I am also stucked at creating my own markups for my treeview. I tried overriding itemTpl and tpl but to no avail. I am thinking of using ordered list <ul> and nested ordered list for children. I'd also need to use custom fields to display other values on my treeview.

    Any help is appreciated. I'm using version 4.0.6.


    Thanks!

  4. #4
    Sencha Premium Member fbrus001's Avatar
    Join Date
    Oct 2011
    Posts
    11
    Vote Rating
    3
    fbrus001 is on a distinguished road

      0  

    Default


    You could try overriding the setNewTemplate function contained in Ext.view.Table. This doesn't seem to be documented though.

Similar Threads

  1. Make GXT more extendable
    By thejoker101 in forum Community Discussion
    Replies: 1
    Last Post: 6 Oct 2010, 9:36 AM
  2. Extendable toolbar buttons with mouse over action
    By mcadirci in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 7 Sep 2010, 3:15 AM
  3. Extendable Class Pattern
    By bocockli in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 3 Feb 2010, 2:27 PM
  4. [2.2][CLOSED] SimpleStore is not extendable
    By elpargo in forum Ext 2.x: Bugs
    Replies: 2
    Last Post: 2 Dec 2008, 8:25 AM

Thread Participants: 2

Tags for this Thread