Results 1 to 8 of 8

Thread: A list In A tab

  1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default A list In A tab

    Hello,

    I have a problem, I would like to insert a scrollable list in a tab but I do not find the solution.

    I have my tab :

    demos.Tabs = new Ext.TabPanel({
    sortable: true, // Tap and hold to sort
    items: [{
    title: 'Tab 1',
    html: 'Tab 1',
    cls: 'card card5'
    },
    {
    title: 'Tab 2',
    html: 'Tab 2',
    cls: 'card card4'
    },
    {
    title: 'Tab 3',
    html: 'Tab 3',
    cls: 'card card3'
    }]
    });


    But instead of having "html : ..." I would put a List like in sensa touch example




    Could anybody help me please.

    Thx

  2. #2
    Sencha Premium User StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    418
    Vote Rating
    48
      0  

    Default

    I think you will have to use the "items" config of the Tab and add the List there, something like...

    Code:
    {
      title: 'Tab1',
      items: [ new List({...}) ]
    }
    obviously swap in a valid List definition...

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    thank you for your reply.

    I just tested it, but it's not exactly what I would like.

    I would like to put (in the previous Tabs Code) a List like that :
    -------------------------------------------------------------
    Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
    });

    demos.ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'firstName',
    getGroupString : function(record) {
    return record.get('firstName')[0];
    },
    data: [
    {firstName: 'Julio', lastName: 'Benesh'},
    {firstName: 'Julio', lastName: 'Minich'},
    {firstName: 'Tania', lastName: 'Ricco'},
    {firstName: 'Odessa', lastName: 'Steuck'},
    {firstName: 'Nelson', lastName: 'Raber'},
    {firstName: 'Tyrone', lastName: 'Scannell'},
    {firstName: 'Allan', lastName: 'Disbrow'},
    {firstName: 'Cody', lastName: 'Herrell'},
    {firstName: 'Julio', lastName: 'Burgoyne'},
    {firstName: 'Jessie', lastName: 'Boedeker'},
    {firstName: 'Allan', lastName: 'Leyendecker'},
    {firstName: 'Javier', lastName: 'Lockley'},
    {firstName: 'Guy', lastName: 'Reasor'},
    {firstName: 'Jamie', lastName: 'Brummer'},
    {firstName: 'Jessie', lastName: 'Casa'},
    {firstName: 'Marcie', lastName: 'Ricca'},
    {firstName: 'Gay', lastName: 'Lamoureaux'},
    {firstName: 'Althea', lastName: 'Sturtz'},
    {firstName: 'Kenya', lastName: 'Morocco'},
    {firstName: 'Rae', lastName: 'Pasquariello'},
    {firstName: 'Ted', lastName: 'Abundis'},
    {firstName: 'Jessie', lastName: 'Schacherer'},
    {firstName: 'Jamie', lastName: 'Gleaves'},
    {firstName: 'Hillary', lastName: 'Spiva'},
    {firstName: 'Elinor', lastName: 'Rockefeller'},
    {firstName: 'Dona', lastName: 'Clauss'},
    {firstName: 'Ashlee', lastName: 'Kennerly'},
    {firstName: 'Alana', lastName: 'Wiersma'},
    {firstName: 'Kelly', lastName: 'Holdman'},
    {firstName: 'Mathew', lastName: 'Lofthouse'},
    {firstName: 'Dona', lastName: 'Tatman'},
    {firstName: 'Clayton', lastName: 'Clear'},
    {firstName: 'Rosalinda', lastName: 'Urman'},
    {firstName: 'Cody', lastName: 'Sayler'},
    {firstName: 'Odessa', lastName: 'Averitt'},
    {firstName: 'Ted', lastName: 'Poage'},
    {firstName: 'Penelope', lastName: 'Gayer'},
    {firstName: 'Katy', lastName: 'Bluford'},
    {firstName: 'Kelly', lastName: 'Mchargue'},
    {firstName: 'Kathrine', lastName: 'Gustavson'},
    {firstName: 'Kelly', lastName: 'Hartson'},
    {firstName: 'Carlene', lastName: 'Summitt'},
    {firstName: 'Kathrine', lastName: 'Vrabel'},
    {firstName: 'Roxie', lastName: 'Mcconn'},
    {firstName: 'Margery', lastName: 'Pullman'},
    {firstName: 'Avis', lastName: 'Bueche'},
    {firstName: 'Esmeralda', lastName: 'Katzer'},
    {firstName: 'Tania', lastName: 'Belmonte'},
    {firstName: 'Malinda', lastName: 'Kwak'},
    {firstName: 'Tanisha', lastName: 'Jobin'},
    {firstName: 'Kelly', lastName: 'Dziedzic'},
    {firstName: 'Darren', lastName: 'Devalle'},
    {firstName: 'Julio', lastName: 'Buchannon'},
    {firstName: 'Darren', lastName: 'Schreier'},
    {firstName: 'Jamie', lastName: 'Pollman'},
    {firstName: 'Karina', lastName: 'Pompey'},
    {firstName: 'Hugh', lastName: 'Snover'},
    {firstName: 'Zebra', lastName: 'Evilias'}
    ]
    });


    demos.List = new Ext.Panel({
    layout: Ext.platform.isPhone ? 'fit' : {
    type: 'vbox',
    align: 'center',
    pack: 'center'
    },
    cls: 'demo-list',
    items: [{
    width: 500,
    height: 500,
    xtype: 'list',
    store: demos.ListStore,
    tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
    itemSelector: 'div.contact',
    singleSelect: true,
    grouped: true,
    indexBar: true
    }]
    });
    --------------------------------------------------

    I tried to put item: [ demo.List ] but it does'nt work

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    Could you be a bit more specific what exactly doesn't work? Does it throw an error? It is very hard for us to help you without really knowing what the problem is.

  5. #5
    Sencha User xantus's Avatar
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    135
    Vote Rating
    0
      0  

    Default

    You probably forgot to create the demos namespace before defining them

    put this first:

    Ext.ns('demos');
    ? Software Engineer
    http://xant.us/

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thank you again for your replys.

    The problem is that I don't know how to do...

    When I try something (I made tests) and nothing works because I don't know.

    I have 2 sides on my screen (like sencha touch kitchensink example):

    the first on the left where I have a menu, and when I click on one item of this menu on the right side 3 tabs appears
    and I would like to put a list in one of this tab.

    But when I try something to put a List in the tab the application break when I click on the menu item.

    I don't know if my explanations are explicit...

    And I thank you for your help

  7. #7
    Sencha User xantus's Avatar
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    135
    Vote Rating
    0
      0  

    Default

    You can help me out by posting a url to a test case, or post some code...
    ? Software Engineer
    http://xant.us/

  8. #8
    Ext User
    Join Date
    Jul 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    I have the code same as given in the Tabs2 example. I would like that when I click on Tab1 a new page(card) appears that has the list in it. I studied the "Getting Started" guide but not able to figure out how to add a card that contains list and also has top tabs as in example for Tab. I want to add another card - on clicking Tab2 that opens up a form.

    Please help.

Similar Threads

  1. Combobox inner list not aligning list items propertly ?
    By ritesh.kapse in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 29 Oct 2010, 5:29 AM
  2. Setting list and list item styles for Html widget
    By afs in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 9 Nov 2009, 2:29 AM
  3. [FNR] DND List-to-List INSERT 1.2.4 demo throwing JS errors
    By Baby Dingo in forum Ext GWT: Bugs (1.x)
    Replies: 2
    Last Post: 12 May 2009, 3:05 PM
  4. tab rendered in a list
    By bhanu prakash dasari in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 11 Mar 2009, 9:17 PM
  5. Disable Tab using 2.0 items list
    By kontr0l in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 23 Jun 2008, 2:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •