1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    ChrisLeM is on a distinguished road

      0  

    Default ListView - Row styling plugin

    ListView - Row styling plugin


    Based on Animal's suggestion of post-load DOM manipulation in this thread http://www.sencha.com/forum/showthread.php?74408 this plugin allows you to simply add a cls to each row in a list

    Code:
    Ext.ns('Ext.ux.plugins');
    Ext.ux.plugins.FormattedListView = function(config){
    	
    	// config should contain a cls attribute
        Ext.apply(this, config);
    	
        this.init = function(listview){
        
            this.listview = listview;
            
    		// Reformat on listview store updates
            listview.mon(listview.store, {
                load: this.formatRows,
                datachanged: this.formatRows,
                remove: this.formatRows,
                loadexception: this.formatRows,
                add: this.formatRows,
                buffer: 50,
                scope: this
            });
            
    		// Need to reformat the rows after resizing columns	
            listview.on({
                afterrender: function(t){                			
                    if (t.colResizer && t.colResizer.tracker) {                
                        t.mon(t.colResizer.tracker, {
                            dragend: this.formatRows,
                            buffer: 50,
                            scope: this
                        });                    
                    }
                },
                scope: this
            });
        }
    }
    
    Ext.ux.plugins.FormattedListView.prototype.formatRows = function(){
    
        var aryRows = Ext.DomQuery.jsSelect('div dl', this.listview.getEl().dom);
        
        Ext.each(aryRows, function(i, ix, l){    
            var e = new Ext.Element(i);        
            e.addClass(Ext.value(this.cls, ''));        
        }, this);
    }
    Example usage:

    Code:
     var listView = new Ext.list.ListView({
                plugins: new Ext.ux.plugins.FormattedListView({
                    cls: 'mylistrowcls'
                }),
                store: ...            
                columns:...
                etc
            });
    Tested with Ext3.3.1, IE8/Chrome7/FF3.6. Could be used to provide alternating coloured rows, performance will likely become an issue for very large lists.

    Works well for me, hope it can be useful to someone else too. Still quite new to this, any constructive criticism gratefully accepted

    Chris

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    Wouldn't it be much easier to use:
    Code:
    var listView = new Ext.list.ListView({
      tpl: new Ext.XTemplate(
        '<tpl for="rows">',
          '<dl<tpl if="xindex % 2"> class="lv-row-odd"</tpl>>',
            '<tpl for="parent.columns">',
              '<dt style="width:{[values.width*100]}%;text-align:{align};">',
              '<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',
               '{[values.tpl.apply(parent)]}',
              '</em></dt>',
            '</tpl>',
            '<div class="x-clear"></div>',
          '</dl>',
        '</tpl>'),
      store: ...
      columns: ...
      ...
    });
    (this should do alternating row colors based on the lv-row-odd class)

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    ChrisLeM is on a distinguished road

      0  

    Default


    Yes it appears so!

    Guess the tpl syntax was putting me off, but it makes sense once you delve into it. Was also unsure if it would reapply the striping after filtering the store, but it appears to do so.

    Thanks Condor

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    Correct, but it does not restripe when adding or removing records.

Similar Threads

  1. Ext.ux.ListView.plugin.CheckboxSelection
    By KRavEN in forum Ext 3.x: User Extensions and Plugins
    Replies: 1
    Last Post: 6 Oct 2010, 2:40 PM
  2. Ext.ux.ListView.plugin.RowActions
    By KRavEN in forum Ext 3.x: User Extensions and Plugins
    Replies: 1
    Last Post: 2 Sep 2010, 8:12 AM
  3. Grid Row Styling On Select
    By Brett889 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 23 Feb 2010, 7:42 PM
  4. Styling each row in the Grid
    By khnle in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Nov 2007, 1:07 AM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar