1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Ahmedabad, Gujarat, india
    Posts
    12
    Vote Rating
    0
    vishal_sencha is on a distinguished road

      0  

    Default Unanswered: List Custom Group Header

    Unanswered: List Custom Group Header


    Hi,

    I want to modify list group header but I can't find any options in sencha touch 2.x api.
    In Sencha Touch 1.x, I can modify header using groupTpl config options of list but can't see in 2.x.
    Is there any other solutions to modify list header section?

    I have tried with following but can't success. Can you please look into this and reply me if i missing something in this.


    store = Ext.create('Ext.data.Store', {
    groupField: "name",
    fields: [{
    name: "name", type: "string"
    }],
    proxy: {
    [.......]
    }
    });

    list = Ext.create('Ext.List', {
    scrollable: 'vertical',
    flex: 1,
    singleSelect: true,
    store: store,
    itemTpl: {name},
    grouped: true,
    groupTpl: [
    '<tpl for=".">',
    '<div class="x-list-group x-group-{id}">',
    '<h3 class="x-list-header" style="height:75px;">',
    '<div style="height:73px !important;">{group} Total</div>',
    '</h3>',
    '<div class="x-list-group-items">',
    '{items}',
    '</div>',
    '</div>',
    '</tpl>'
    ]
    });


    I also had inspected dom as well, but can't see element listed in groupTpl.


    Thanks in advance

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Germany, Dresden
    Posts
    35
    Vote Rating
    1
    Answers
    3
    mrVVoo is on a distinguished road

      1  

    Default


    you can do this with the grouper config in the list's store:

    Code:
    grouper: {
                groupFn: function(record) {
                    var isStatic = record.get('isStatic');
                    if(isStatic){
                        return 'General';
                    } else {
                        return 'Dynamic Topics';
                    }
                },
                sortProperty: 'filterId',
            },
    this example is from my application but it shows the functionality in a simple way. if you don't need a grouper function explicitly you should take a look at the transform function witch only changes the grouping value. (in german you need that for correct grouping of special letters like ä (to a),ö (to o), ü or ß

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    128
    Vote Rating
    16
    Answers
    2
    badgerb1 will become famous soon enough

      0  

    Default


    Doesn't look like anyone answered this question extremely well so here's what we came up with.

    NOTE any updates to the doUpdateListItem or headerTranslateFn will require changes to this extension.

    Sencha, could we add this config/functionality to the base List class?

    /**
    * Created by Sansio
    * Author: Robert Brown
    * Date: 4/12/13
    * Time: 11:02 AM
    */




    Ext.define("Ext.ux.touch.dataview.GroupTplList", {
    extend:'Ext.dataview.List',
    xtype:'grouptpllist',


    config:{
    /**
    * @cfg {Boolean} groupHeaderTpl
    * An Xtemplate config that will be used to generate the groupheaders.
    * The following fields will be included in the values sent to the template:
    * headerString: This is the result of the group function on the underlying store. This is the default output for the list header.
    * groupCount: This is the number of items in the group.
    *
    * Additionally all data from the first record in the group will be sent to the template.
    *
    * Defaults to "{headerString}" which emulates the basic list header functionality.
    */
    groupHeaderTpl:"{headerString}"
    },


    applyGroupHeaderTpl:function(config){
    return (Ext.isObject(config) && config.isTemplate) ? config : new Ext.XTemplate(config);
    },


    //Generates the html for the group header by running the groupHeaderTpl template for the group.
    _generateGroupHtml:function(store, headerString, record){
    var group = store.getGroups(headerString);
    var tpl = this.getGroupHeaderTpl();
    var data = record.getData(true);
    data.headerString = headerString;
    data.groupCount = group.children.length;
    var html = tpl.apply(data);
    return html;
    },


    //This function will override the base List functionality and allow for setting a Template for the Group Header.
    headerTranslateFn:function(record, transY, headerTranslate){
    if (this.getGroupHeaderTpl()){


    var headerString = this.getStore().getGroupString(record);


    if (this.currentHeader !== headerString) {
    this.currentHeader = headerString;
    this.header.setHtml(this._generateGroupHtml(this.getStore(), headerString, record));
    }
    headerTranslate.translate(0, transY);
    }else {
    //run normal headerTranslateFunction.
    this.callParent(arguments);
    }
    },


    doUpdateListItem: function(item, index, info) {
    var record = info.store.getAt(index),
    headerIndices = this.headerIndices,
    footerIndices = this.footerIndices,
    headerItem = item.getHeader(),
    scrollDockItems = this.scrollDockItems,
    updatedItems = this.updatedItems,
    itemHeight = info.itemMap.getItemHeight(index),
    ln, i, scrollDockItem;


    if (!record) {
    item.setRecord(null);
    item.translate(0, -10000);
    item._list_hidden = true;
    return;
    }
    item._list_hidden = false;


    if (item.isFirst && scrollDockItems.top.length) {
    for (i = 0, ln = scrollDockItems.top.length; i < ln; i++) {
    scrollDockItem = scrollDockItems.top[i];
    scrollDockItem.addCls(Ext.baseCSSPrefix + 'list-scrolldock-hidden');
    item.remove(scrollDockItem, false);
    }
    item.isFirst = false;
    }


    if (item.isLast && scrollDockItems.bottom.length) {
    for (i = 0, ln = scrollDockItems.bottom.length; i < ln; i++) {
    scrollDockItem = scrollDockItems.bottom[i];
    scrollDockItem.addCls(Ext.baseCSSPrefix + 'list-scrolldock-hidden');
    item.remove(scrollDockItem, false);
    }
    item.isLast = false;
    }


    if (item.getRecord) {
    if (item.dataIndex !== index) {
    item.dataIndex = index;
    this.fireEvent('itemindexchange', this, record, index, item);
    }
    if (item.getRecord() === record) {
    item.updateRecord(record);
    } else {
    item.setRecord(record);
    }
    }


    if (this.isSelected(record)) {
    item.addCls(info.selectedCls);
    }
    else {
    item.removeCls(info.selectedCls);
    }


    item.removeCls([info.headerCls, info.footerCls, info.firstCls, info.lastCls]);


    if (info.grouped) {
    if (headerIndices[index]) {
    item.addCls(info.headerCls);


    //Change to allow for headerGroupTemplates.
    var headerString = info.store.getGroupString(record);
    headerItem.setHtml(this._generateGroupHtml(info.store, headerString, record));
    //End Change to allow for headerGroupTemplates.


    headerItem.show();
    headerItem.element.setVisibility(true);


    // If this record is a group header, and the items height is still the default height
    // we need to read the actual size of the item (including the header)
    if (!info.variableHeights && itemHeight === info.defaultItemHeight) {
    Ext.Array.include(updatedItems, item);
    }
    }
    else {
    headerItem.hide();


    // If this record is not a header (anymore) and its height is unequal to the default item height
    // it means the item must have gotten a different height because being a header before and now needs
    // to become the default height again
    if (!info.variableHeights && !footerIndices[index] && itemHeight !== info.defaultItemHeight) {
    info.itemMap.setItemHeight(index, info.defaultItemHeight);
    info.itemMap.update();
    }
    }


    if (footerIndices[index]) {
    item.addCls(info.footerCls);


    // If this record is a footer and its height is still the same as the default item height, we have
    // to make sure to read this items height to see if adding the foot cls effects its height
    if (!info.variableHeights && itemHeight === info.defaultItemHeight) {
    Ext.Array.include(updatedItems, item);
    }
    }
    } else if (!info.variableHeights && itemHeight !== info.defaultItemHeight) {
    // If this list is not grouped, the only thing that can change the height of an item
    // can be scroll dock items. If an items height is not equal to the default item height
    // it means it must have had scroll dock items. In this case we set the items height
    // to become the default height again.
    info.itemMap.setItemHeight(index, info.defaultItemHeight);
    info.itemMap.update();
    }


    if (index === 0) {
    item.isFirst = true;
    item.addCls(info.firstCls);


    if (!info.grouped) {
    item.addCls(info.headerCls);
    }


    for (i = 0, ln = scrollDockItems.top.length; i < ln; i++) {
    scrollDockItem = scrollDockItems.top[i];
    item.insert(0, scrollDockItem);
    scrollDockItem.removeCls(Ext.baseCSSPrefix + 'list-scrolldock-hidden');
    }


    // If an item gets scrolldock items inside of it, we need to always read the height
    // in the next frame so we add it to the updatedItems array
    if (ln && !info.variableHeights) {
    Ext.Array.include(updatedItems, item);
    }
    }


    if (index === info.store.getCount() - 1) {
    item.isLast = true;
    item.addCls(info.lastCls);


    if (!info.grouped) {
    item.addCls(info.footerCls);
    }


    for (i = 0, ln = scrollDockItems.bottom.length; i < ln; i++) {
    scrollDockItem = scrollDockItems.bottom[i];
    item.insert(0, scrollDockItem);
    scrollDockItem.removeCls(Ext.baseCSSPrefix + 'list-scrolldock-hidden');
    }


    // If an item gets scrolldock items inside of it, we need to always read the height
    // in the next frame so we add it to the updatedItems array
    if (ln && !info.variableHeights) {
    Ext.Array.include(updatedItems, item);
    }
    }


    item.$height = info.itemMap.getItemHeight(index);


    if (info.variableHeights) {
    updatedItems.push(item);
    }
    }
    });