Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Basic List Question

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default Basic List Question

    I have looked at some examples and I am trying to figure out how to create a basic list. Every example i have looked at is a complex list having to pull data from outside. I have a card layout and on card 2 I want to display a pick list of about 5 options but they will be static. So is there an easy way to do this? Whats in blue does not work.

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: true,
        onReady: function() {
           
    	    var titleBar = new Ext.Toolbar({
    			dock:'top'
    		});
    	   
    	    var tabpanel = new Ext.TabPanel({
    		    tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
    			dockedItems: [titleBar],
                fullscreen: true,
                ui: 'light',
                animation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
    			listeners: {
    				afterlayout : function() {
    					titleBar.setTitle(this.layout.activeItem.title);
    				},
    				cardswitch: function(card) {
    					titleBar.setTitle(card.title);
    				}
    			},
                items: [{
                    title: 'Card 1',
                    iconCls: 'time',
                    cls: 'card1',
    				contentEl: 'card1' 
                }, {
                    title: 'Card 2',
                    iconCls: 'team',
                    cls: 'card2',
    				items: [
    					new Ext.List({
    						items:[
    							{title: 'Option1'},
    							{title: 'Option2'}
    						]
    					})
    				]
                }, {
                    title: 'Card 3',
                    cls: 'card3',
                    iconCls: 'download',
    				contentEl: 'card3'
                }, {
                    title: 'Card 4',
                    cls: 'card4',
                    iconCls: 'settings',
    				contentEl: 'card4'
                }, {
                    title: 'Card 5',
                    cls: 'card5',
                    iconCls: 'user',
    				contentEl: 'card5'
                }	
    			]
            });
    		
        }
    });
    
    function handleError(e){
    	console.log(e);
    }

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default

    Just to be a bit more specific. I have a card that will have a list with some options


    By Name
    By Category

    When you select one of these items we will go to a new card to a list of items by (name/category)

    Hope that makes sense

  3. #3
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178
    Vote Rating
    0
      0  

    Default

    this is quite a lot code^^

    maybe you should give your code a better structure, and create the items step by step.
    first u can create your list, add it to a panel and then add this panel to your toolbar.
    for creating a static list, you should take a look at the example in the sencha folder in examples/list.

    finally in some ext pseude code it could be something like this^^

    Code:
    var list = new Ext.List({
         // add your config here, watch examples for details
    });
    
    
    var panel = new Ext.Panel({
         items:
    [list]
    });
    
    
    var toooooolbar = new Ext.Toolbar({
          items:[panel]
    });
    somehow in this way i should work....

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default

    Ok so your code is great nice and basic.. once you have the list how do add items to it? I am looking to display items to the user to pick from.

    I know this doesn't work but maybe it will give you an idea.

    list.add("Option 1");
    list.add("Option 2");

    Or am I going about this the wrong way. Do i just build some html on the display side.

    <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    </ul>

    That probably won't work though because I want these to look like native list items

    Am I making any sense ;0

  5. #5
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178
    Vote Rating
    0
      0  

    Default

    i think that ul/li elemts will not work......looks like some jquery workaround^^

    when for creating a list u need to create a store, that holds the data for your list. you add the data to your store not to your list. finally combine the store with your list.

    finally it is important, that you download sencha 0.91 extract it and goto EXTRACTFOLDER/examples/list/src/index.js.

    here you find an example with a local store, without using ajax or something like that.

    or use e.g. chrome and check out these exmaples

    http://www.sencha.com/deploy/touch/e...s/kitchensink/

    then goto UserInterface and List.....

    otherwiese i can spend some time in a few hours after having some cold mochito^^

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default

    Just seems like a bit overkill to display a couple of options to a user

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default

    Maybe there is a better way to do this.. From a user experience stand point how would you (anyone reading this) go about this. I have a productions tab and when the user selects products I want to present them with some options

    By Category
    By Brand
    A-Z
    Search

    These will go to new screens that give the user a different way of finding products.

    Is this a good place for a list?
    Should I create some buttons?
    What would you do here.

    I get confused when I have screens in screens on what the best approach would be.

  8. #8
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178
    Vote Rating
    0
      0  

    Default

    maybe u can use a bottomtoolbar from http://www.sencha.com/deploy/touch/e...s/kitchensink/
    from UI->Icons and add 2 panels. first panel contains your list, second panel contains your search form to filter your list. after click on listitems u can open an overlay for detailles information to the product
    (see http://www.sencha.com/deploy/touch/e...s/kitchensink/ ->UI->overlay......

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    94
    Vote Rating
    0
      0  

    Default

    I am clearly not explaining myself...I will put together some mockups

  10. #10
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178
    Vote Rating
    0
      0  

    Default

    yes, do that and maybe write some pm, that we do not bore the rest of the sencha forum^^

Page 1 of 2 12 LastLast

Similar Threads

  1. Basic question
    By pokerking400 in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 9 May 2008, 12:07 PM
  2. Probably a basic Question..
    By Fredric Berling in forum Ext.nd for Notes/Domino
    Replies: 3
    Last Post: 28 Apr 2008, 11:40 PM
  3. basic dialog basic question
    By kevinknight in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 13 Mar 2007, 10:58 AM
  4. basic js question
    By seldon in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 10 Feb 2007, 7:42 AM
  5. basic question...
    By genius551v in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 20 Nov 2006, 11:54 AM

Posting Permissions

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