1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    48
    Vote Rating
    0
    Shijutv is on a distinguished road

      0  

    Default Help to make index bar as horizontal

    Help to make index bar as horizontal


    Hi All,
    This is my list , i am using a store 'CityStore'. As per client's requirment i need to make the index bar as horizontally .
    Could anyone help me to do it ?

    var cityListContent2 = new Ext.List({
    id: 'cityListContent2',
    store: 'CityStore',
    //cls: 'Mylist',
    singleSelect: true,
    width: Ext.is.Phone ? undefined : 300,
    height: 500,
    grouped:true,
    indexBar:true,
    itemTpl: '<div class="list-item-city">{city_name}</div>',
    listeners:{
    itemtap: function(record, index,item,e){
    var rec = record.store.getAt(index);
    var city_title=rec.get('city_name');
    var ct='<b>'+city_title+'</b>';
    var cid1=rec.get('city_id');
    localStorage.setItem("city_id1", cid1);
    localStorage.setItem("city_type",rec.get('type'));
    cid = localStorage.getItem("city_id1");
    categoryListContent.bindStore(Ext.getStore('LONCategoryStore'));
    detailPanel.setActiveItem('categoryList', { type: 'slide', direction: 'left' });
    categoryListContent.scroller.scrollTo({x: 0, y: 0}, true);
    }
    }
    });

    Thanks In advance,
    Shiju

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi

    Try this code -
    Code:
    var list = new Ext.List({
       fullscreen: true,
       itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
       grouped     : true,
     indexBar    : new Ext.dataview.IndexBar({direction:'horizontal', docked:'top'}),
       store: store,
       hideOnMaskTap: false
    });
    Also you can read API docs http://docs.sencha.com/touch/2-0/#!/...-cfg-direction
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    48
    Vote Rating
    0
    Shijutv is on a distinguished road

      0  

    Default


    Hi ,

    I am using Sencha 1. , So new Ext.dataview.IndexBar({direction:'horizontal', docked:'top'}), is not working.So insted of that i am using new Ext.IndexBar({direction:'horizontal', docked:'top'}). But no result.

    Below is the code.
    var cityListContent2 = new Ext.List({
    id: 'cityListContent2',
    fullscreen: true,
    itemTpl: '<div class="list-item-city">{city_name}</div>',
    grouped : true,
    indexBar : new Ext.IndexBar({direction:'horizontal', docked:'top'}),
    store: 'CityStore',
    hideOnMaskTap: false
    })

    Shiju

Thread Participants: 1