1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Mainz
    Posts
    241
    Vote Rating
    1
    crp_spaeth is on a distinguished road

      0  

    Default Ext.ux.GroupingListView

    Ext.ux.GroupingListView


    Hi all,

    I really Love the new ListView comeing with Extjs 3.0 but I had to use the normal GridPanel I i would like to have Grouping.

    Since the ListView is much much faster than the GridPanel, I decided to Extend it and add the grouping ability to it.

    See what I came up with.

    PHP Code:
    Ext.ux.GroupedListView Ext.extend(Ext.ListView, {
        
        
    /**
         * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults to false)
         */
        
    startCollapsed false,
        
        
    /**
         * @cfg {Array} startExpanded An Array of GroupeId's that should start Collapsed
         */
        
    startExpanded : [],
        
        
    groupState : {},
        
        
    initComponent : function(){
            var 
    collapsedClass '';
            if(
    this.startCollapsed) {
                
    collapsedClass ' x-grid-group-collapsed';
            }
            
    this.tpl = new Ext.XTemplate(
                
    '<tpl for="rows">',
                     
    // grouping header
                     
    '<tpl if="xindex == 1 || parent.rows[xindex-1].group_index !=  parent.rows[xindex-2].group_index">',
                        
    '<div class="x-grid-group {[this.getCollapseClass(values)]}" groupeindex="{group_index}">',
                            
    '<div class="x-grid-group-hd"><div class="x-grid-group-title">{group_index} ''</div></div>',
                            
    '<div class="x-grid-group-body">',                        
                     
    '</tpl>'// endof grouping header
                             // row template
                            
    '<dl>',
                                
    '<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>',
                            
    // endof row template
                    // grouping footer 
                    
    '<tpl if="xindex == (xcount) || this.isBigger(xindex, (xcount-1)) || parent.rows[xindex-1].group_index !=  parent.rows[xindex].group_index"> ',        
                            
    '</div>',
                        
    '</div>',
                    
    '</tpl>',
                    
    // endof grouping footer
                    
                
    '</tpl>',
                
    '<div class="dataview-border"></div>',{
                    
    isBigger : function(isbiggerthan) {
                        return 
    isbigger than;
                    },
                    
    getCollapseClass : function(values){
                        return 
    values.group_collapsed ' x-grid-group-collapsed' '';
                    }
                }
            );
            
    Ext.ux.GroupedListView.superclass.initComponent.apply(thisarguments);
        },
        
        
    prepareData : function(recDataindexrecord){
            var 
    data = {},
                
    groupId record.data[record.store.groupField];
               
            
    Ext.apply(datarecData);
            
    data.group_index groupId;
            if(!
    this.groupState[groupId]) {
                
    this.groupState[groupId] = this.startCollapsed && (this.startExpanded.indexOf(groupId) ==-1) ? false true
            }
            
    console.log(groupIdthis.groupState[groupId]);
            
    data.group_collapsed = !this.groupState[groupId];
            return 
    data;
        },
        
        
    onRender : function(){
            
    Ext.ux.GroupedListView.superclass.onRender.apply(thisarguments);
            
    this.innerBody.on('mousedown'this.interceptMousethis);
        },
        
        
    interceptMouse : function(e){
            var 
    hd e.getTarget('.x-grid-group-hd'this.innerBody);
            if(
    hd){
                
    e.stopEvent();
                
    this.toggleGroup(hd.parentNode);
            }
        },
        
       

        
    /**
         * Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
         * @param {String} groupId The groupId assigned to the group (see getGroupId)
         * @param {Boolean} expanded (optional)
         */
        
    toggleGroup : function(groupexpanded){
            var 
    gel Ext.get(group);
            var 
    groupIndex gel.getAttribute('groupeindex');
            
    expanded Ext.isDefined(expanded) ? expanded gel.hasClass('x-grid-group-collapsed');        
            
    this.groupState[groupIndex] = expanded;
            
    gel[expanded 'removeClass' 'addClass']('x-grid-group-collapsed');        
        }
        
    });


    Ext.reg('grouinglistview'Ext.ux.GroupedListView); 

    ExampleUsage:

    PHP Code:
    var dummyData = [
    [
    '3m Co',71.72,0.02,0.03,'4/2 12:00am''Manufacturing'],
    [
    'Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am''Manufacturing'],
    [
    'Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am''Manufacturing'],
    [
    'American Express Company',52.55,0.01,0.02,'4/8 12:00am''Finance'],
    [
    'American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am''Services'],
    [
    'AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am''Services'],
    [
    'Boeing Co.',75.43,0.53,0.71,'4/8 12:00am''Manufacturing'],
    [
    'Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am''Services'],
    [
    'Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am''Finance'],
    [
    'E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am''Manufacturing'],
    [
    'Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am''Manufacturing'],
    [
    'General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am''Manufacturing'],
    [
    'General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am''Automotive'],
    [
    'Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am''Computer'],
    [
    'Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am''Manufacturing'],
    [
    'Intel Corporation',19.88,0.31,1.58,'4/2 12:00am''Computer'],
    [
    'International Business Machines',81.41,0.44,0.54,'4/1 12:00am''Computer'],
    [
    'Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am''Medical'],
    [
    'JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am''Finance'],
    [
    'McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am''Food'],
    [
    'Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am''Medical'],
    [
    'Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am''Computer'],
    [
    'Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am''Services''Medical'],
    [
    'The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am''Food'],
    [
    'The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am''Retail'],
    [
    'The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am''Manufacturing'],
    [
    'United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am''Computer'],
    [
    'Verizon Communications',35.57,0.39,1.11,'4/3 12:00am''Services'],
    [
    'Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am''Retail'],
    [
    'Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am''Services']
    ];

    Ext.onReady(function(){
         var 
    reader = new Ext.data.ArrayReader({}, [
           {
    name'company'},
           {
    name'price'type'float'},
           {
    name'change'type'float'},
           {
    name'pctChange'type'float'},
           {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
           {
    name'industry'},
           {
    name'desc'}
        ]);
        
        var 
    store = new Ext.data.GroupingStore({
            
    readerreader,
            
    datadummyData,
            
    sortInfo:{field'company'direction"ASC"},
            
    groupField:'industry'
        
    });

        var 
    listView = new Ext.ux.GroupedListView({
            
    storestore,
            
    multiSelecttrue,
            
    emptyText'No images to display',
            
    reserveScrollOffsettrue,

        
    startCollapsed true,
        
    startExpanded : ['Computer''Manufacturing'],
            
    columns: [{
                
    header'Company',
                
    width.5,
                
    dataIndex'company'
            
    },{
                
    header'Last Modified',
                
    width.35
                
    dataIndex'lastChange',
                
    tpl'{lastChange:date("m-d h:i a")}'
            
    },{
                
    header'Price',
                
    dataIndex'price',
                
    align'right'
            
    }]
        });
        
        
    // put it in a Panel so it looks pretty
        
    var panel = new Ext.Panel({
            
    id:'images-view',
            
    width:425,
            
    height:250,
            
    collapsible:true,
            
    layout:'fit',
            
    title:'Simple ListView <i>(0 items selected)</i>',
            
    itemslistView
        
    });
        
    panel.render(document.body);

        
    // little bit of feedback
        
    listView.on('selectionchange', function(viewnodes){
            var 
    nodes.length;
            var 
    != 's' '';
            
    panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
        });
    }) 
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    Thank you for sharing. I needed this.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    If you add an overClass to the GroupingListView config like 'x-grid3-row-over' it doesn't behave properly. The row gets bigger because of the added border causing the list to jump a bit.

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    Collapse.jpg


    Here is the Grid collapsable icon in the attached image. I need a tooltip for this.


    OrderDenomDtlGridSummary = Ext.extend(Ext.grid.EditorGridPanel, {

    initComponent: function() {



    this.view = new Ext.grid.GroupingView({
    forceFit:true,
    monitorResize :true,
    monitorWindowResize:true,
    getRowClass : function (record,meta, index) {
    if (record.data.denominationId < 0) {
    return 'x-grid3-tr-orderTotal';
    }
    },

    startGroup: myTpl
    });

    var detailRecord = Ext.data.Record.create([
    {name:'currencyId'},
    {name:'denominationId'},
    {name:'fitness'}

    ]);
    var denomStore = new Ext.data.GroupingStore({
    reader: new Ext.data.JsonReader({root: "rows"},detailRecord),
    sortInfo:{field: 'fitness', direction: "ASC"},
    groupField:'fitness'
    });


    this.store = denomStore;

    }
    }

    =====================================

    this.OrderDenomDtlGridSummary = new OrderDenomDtlGridSummary({
    currencyCountry:this.currency,
    serviceType:this.serviceType,
    anchor:'100%',
    collapsible: true,//
    title: '<cl:message code="title" />',
    toggleTip: {
    text: '<cl:message code="Collapse" />'
    },
    listeners: {
    render: function(c){
    c.toggleTip.target = c.tools['toggle'];
    Ext.QuickTips.register(c.toggleTip);
    },
    expand: function(c){
    c.toggleTip.text = '<cl:message code="Collapse" />';
    },
    collapse: function(c){
    c.toggleTip.text = '<cl:message code="Expand" />';
    }


    }
    });
    Please do the needful

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    42
    Vote Rating
    0
    ravigupta84 is on a distinguished road

      0  

    Default


    I have found the code for Grouping view - see the below code. I need a tooltip for the above images

    Ext.grid.GroupingView = Ext
    .extend(
    Ext.grid.GridView,
    {
    groupByText :"Group By This Field",
    showGroupsText :"Show in Groups",
    hideGroupedColumn :false,
    showGroupName :true,
    startCollapsed :false,
    enableGrouping :true,
    enableGroupingMenu :true,
    enableNoGroups :true,
    emptyGroupText :"(None)",
    ignoreAdd :false,
    groupTextTpl :"{text}",
    gidSeed :1000,
    initTemplates : function() {
    Ext.grid.GroupingView.superclass.initTemplates
    .call(this);


    this.endGroup = "</div></div>"
    },
    renderUI : function() {
    Ext.grid.GroupingView.superclass.renderUI.call(this);
    this.mainBody
    .on("mousedown", this.interceptMouse, this);
    if (this.enableGroupingMenu && this.hmenu) {
    this.hmenu.add("-", {
    itemId :"groupBy",
    text :this.groupByText,
    handler :this.onGroupByClick,
    scope :this,
    iconCls :"x-group-by-icon"
    });
    if (this.enableNoGroups) {
    this.hmenu.add( {
    itemId :"showGroups",
    text :this.showGroupsText,
    checked :true,
    checkHandler :this.onShowGroupsClick,
    scope :this
    })
    }
    this.hmenu.on("beforeshow", this.beforeMenuShow,
    this)
    }
    },
    toggleGroup : function(c, b) {
    this.grid.stopEditing(true);
    c = Ext.getDom(c);
    var a = Ext.fly(c);
    b = b !== undefined ? b : a
    .hasClass("x-grid-group-collapsed");
    this.state[a.dom.id] = b;
    a[b ? "removeClass" : "addClass"]
    ("x-grid-group-collapsed")
    },

    expandAllGroups : function() {
    this.toggleAllGroups(true)
    },
    collapseAllGroups : function() {
    this.toggleAllGroups(false)
    },
    getGroupId : function(g) {
    var d = this.grid.getGridEl().id;
    var c = this.getGroupField();
    var e = this.cm.findColumnIndex(c);
    var b = this.cm.config[e];
    var h = b.groupRenderer || b.renderer;
    var a = this.getGroup(g, {
    data : {}
    }, h, 0, e, this.ds);
    return d + "-gp-" + c + "-"
    + Ext.util.Format.htmlEncode(g)
    }
    });

    Last edited by ravigupta84; Today at 5:36 PM. Reason: Removed extra code

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    This extension is for a ListView. You're asking about GroupingView for a grid. Go ask on the help forum.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    Anyone using this have any ideas on how to add an array of values objects for each grouping to the values object that is passed to the template?

    With GroupingView you can access values.rs in the template and rs is an array of all the values objects for that grouping.

    There doesn't look to be an easy way to do that with the way the grouping is implemented with this ux. This implementation is of course faster, but now I can't override the header template and add counts to the header like I could with GroupingView.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    Okay, I added the values.rs array similar to how GroupingView does it. I also added groupRenderer similar to GroupingView. Finally I renamed the ux to Ext.ux.list.GroupingListView to be more consistent with Ext naming.

    Still to do figure out a way to handle if grouping is turned off in the store and then the store is reloaded. Right now this creates an empty group at the start of the list.

    EDIT
    24 Sep 2010 - added toggleAllGroups, expandAllGroups, collapseAllGroups methods

    PHP Code:
    Ext.ns('Ext.ux.list');
    Ext.ux.list.GroupingListView Ext.extend(Ext.ListView, {

      
    /**
       * @cfg {Boolean} startCollapsed true to start all groups collapsed (defaults
       *      to false)
       */
      
    startCollapsed false,

      
    /**
       * @cfg {Array} startExpanded An Array of GroupeId's that should start
       *      Collapsed
       */
      
    startExpanded : [],

      
    groupHeaderTpl '<tpl if="xindex == 1 || parent.rows[xindex-1].group_index !=  parent.rows[xindex-2].group_index">'
        
    '<div class="x-grid-group {[this.getCollapseClass(values)]}" group-index="{group_index}">'
          
    '<div class="x-grid-group-hd">'
            
    '<div class="x-grid-group-title">'
              
    '{group_index} '
            
    '</div>'
          
    '</div>'
        
    '<div class="x-grid-group-body">' +
      
    '</tpl>',

      
    groupFooterTpl '<tpl if="xindex == (xcount) || this.isBigger(xindex, (xcount-1)) || parent.rows[xindex-1].group_index !=  parent.rows[xindex].group_index"> '
        
    '</div></div></tpl>',

      
    groupState : {},

      
    initComponent : function() {
        var 
    collapsedClass '';
        if (
    this.startCollapsed) {
          
    collapsedClass ' x-grid-group-collapsed';
        }
        
    this.tpl = new Ext.XTemplate(
        
    '<tpl for="rows">',
          
    // grouping header
          
    this.groupHeaderTpl,
          
    // endof grouping header

          // row template
          
    '<dl class="x-grid3-row {[xindex % 2 === 0 ? "" :  "x-grid3-row-alt"]}">',
            
    '<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>',
          
    // endof row template

          // grouping footer
          
    this.groupFooterTpl,
          
    // endof grouping footer

        
    '</tpl>',
        
    '<div class="dataview-border"></div>', {
          
    isBigger : function(isbiggerthan) {
            return 
    isbigger than;
          },
          
    getCollapseClass : function(values) {
            return 
    values.group_collapsed ' x-grid-group-collapsed' '';
          }
        }
        );
        
    Ext.ux.list.GroupingListView.superclass.initComponent.apply(thisarguments);
      },

      
    collectData : function(recordsstartIndex) {
        var 
    rs = [], groups = {}, groupRs = [], j;
        for (var 
    0len records.lengthleni++) {
          
    rs[i] = this.prepareData(records[i].datastartIndex irecords[i]);

          if (
    == || rs[i]['group_index'] != rs[1]['group_index']) {
            if (
    0) {
              
    groups[j] = groupRs;
              
    groupRs = [];
            }
            
    rs[i]['group_index'];
          }
          
    groupRs.push(rs[i]);
        }

        
    // add the final array of rs objects
        
    groups[j] = groupRs;

        
    Ext.each(rs, function(itemindex) {
          
    item.rs groups[item.group_index];
        });

        return {
          
    columns this.columns,
          
    rows rs
        
    }
      },

      
    prepareData : function(recDataindexrecord) {
        var 
    data = {}, groupId record.data[record.store.groupField];

        
    groupId this.groupRenderer this.groupRenderer(groupIdindexrecord) : String(groupId);

        
    Ext.apply(datarecData);
        
    data.group_index groupId;
        if (!
    this.groupState[groupId]) {
          
    this.groupState[groupId] = this.startCollapsed && (this.startExpanded.indexOf(groupId) == -1)
            ? 
    false true;
        }
        
    data.group_collapsed = !this.groupState[groupId];
        return 
    data;
      },

      
    onRender : function() {
        
    Ext.ux.list.GroupingListView.superclass.onRender.apply(thisarguments);
        
    this.innerBody.on('mousedown'this.interceptMousethis);
      },

      
    interceptMouse : function(e) {
        var 
    hd e.getTarget('.x-grid-group-hd'this.innerBody);
        if (
    hd) {
          
    e.stopEvent();
          
    this.toggleGroup(hd.parentNode);
        }
      },

      
    /**
       * Toggles the specified group if no value is passed, otherwise sets the
       * expanded state of the group to the value passed.
       *
       * @param {String}
       *          groupId The groupId assigned to the group (see getGroupId)
       * @param {Boolean}
       *          expanded (optional)
       */
      
    toggleGroup : function(groupexpanded) {
        var 
    gel Ext.get(group);
        var 
    groupIndex gel.getAttribute('group-index');
        
    expanded Ext.isDefined(expanded) ? expanded gel.hasClass('x-grid-group-collapsed');
        
    this.groupState[groupIndex] = expanded;
        
    gel[expanded 'removeClass' 'addClass']('x-grid-group-collapsed');
      },

      
    /**
       * Toggles all groups if no value is passed, otherwise sets the expanded state
       * of all groups to the value passed.
       *
       * @param {Boolean}
       *          expanded (optional)
       */
      
    toggleAllGroups : function(expanded) {
        var 
    groups this.innerBody.dom.childNodes;
        for (var 
    0len groups.lengthleni++) {
          
    this.toggleGroup(groups[i], expanded);
        }
      },

      
    /**
       * Expands all grouped rows.
       */
      
    expandAllGroups : function() {
        
    this.toggleAllGroups(true);
      },

      
    /**
       * Collapses all grouped rows.
       */
      
    collapseAllGroups : function() {
        
    this.toggleAllGroups(false);
      }
    });

    Ext.reg('groupinglistview'Ext.ux.list.GroupingListView); 

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."