1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    ksystems is on a distinguished road

      0  

    Default Simple List with Dynamic Card

    Simple List with Dynamic Card


    I was wondering what the best way to approach this would be.

    I have a list and clicking an Item in the list will display a new card populated with that entries details. I realise this is VERY simplistic but I am not sure what I should be doing. Do I use a card layout with the list as the first card and apply values to the second card on click? Or do I place a card over the list?

    James

    UPDATE: I should learn to read. Sorry.

    http://www.sencha.com/forum/showthre...tural-Approach
    Last edited by ksystems; 20 Sep 2010 at 2:28 AM. Reason: I can;t read

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,785
    Vote Rating
    597
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    Ext.setup({
        onReady: function(){
            
            Ext.regModel('Person', {
                fields: ['first', 'last', 'age']    
            });
            
            var store = new Ext.data.Store({
                model: 'Person',
                data: [{
                    first: 'John',
                    last: 'Doe',
                    age: 25
                },{
                    first: 'Mary',
                    last: 'Smith',
                    age: 26
                }]    
            });
            
            var main = new Ext.Panel({
                layout: 'card',
                fullscreen: true,
                items: [{
                    itemId: 'list',
                    xtype: 'list',
                    store: store,
                    itemSelector: '.person',
                    tpl: '<tpl for="."><div class="person">{first}</div></tpl>',
                    listeners: {
                        itemtap: function(list, index){
                            var detail = main.getComponent('detail'),
                                rec = store.getAt(index);
                                
                            detail.update(rec.data);
                            main.setCard(detail);
                        }
                    }
                },{
                    itemId: 'detail',
                    tpl: '{first} - {last} - {age}',
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [{
                            text: 'Back',
                            handler: function(){
                                main.setCard(0);
                            }
                        }]
                    }]
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    TransformD is on a distinguished road

      0  

    Default


    Evan, thanks for the code.

    How would you approach this if you were loading each card dynamically from a local html file, the way that jQT does with local links to html files?

    Essentially, I want to port my existing list/card architecture app to Sencha, so that it works the same as it did with jQT, but with the more native-acting header/toolbar that Sencha offers.

    Thanks!
    -Michael

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    73
    Vote Rating
    0
    lukesayaw is on a distinguished road

      0  

    Default


    Hi,

    I am working on a project with the same functionality. The sample code provided is very simple and not database driven. In the sample code, the detail list was already populated with the data from the model i.e. {first}, {last}, and {age} upon initialization. I would like to populate the detail list dynamically with the data from the data source only when the user taps the itemtap of the list. I mean, upon item tap event of the list, a particular id will be retrieved from the tpl e.g {id} and passed to the url for getting the related data from the data source and populate the detail list. How should I solve the problem. Any help would be very much appreciated. \

    Currently I am using Jsonstore and got no problem filling up the first list with data. Actually, I would like to create another list upon itemtap event. Is that possible?
    Many Thanks.

  5. #5
    Ext User mikeyroy's Avatar
    Join Date
    Jul 2010
    Location
    San Francisco
    Posts
    101
    Vote Rating
    1
    mikeyroy is on a distinguished road

      0  

    Default


    Quote Originally Posted by TransformD View Post
    Evan, thanks for the code.

    How would you approach this if you were loading each card dynamically from a local html file, the way that jQT does with local links to html files?

    Essentially, I want to port my existing list/card architecture app to Sencha, so that it works the same as it did with jQT, but with the more native-acting header/toolbar that Sencha offers.

    Thanks!
    -Michael
    To pull in HTML code into your Sencha Touch App you can use contentEl: 'divID' as a parameter for the element you want the html to go into. Sencha basically uses a single HTML file, so to go that route you would have to have your content in the same index.html with class="x-hidden-display" on each of the parent div elements. Alternatively you might be able to do an ajax request to your root location to pull in html files, for native apps in phonegap it's something like file:///android_asset/www/ while a web app would be the obvious. I haven't tried it, so YMMV.

  6. #6
    Ext User mikeyroy's Avatar
    Join Date
    Jul 2010
    Location
    San Francisco
    Posts
    101
    Vote Rating
    1
    mikeyroy is on a distinguished road

      0  

    Default


    Quote Originally Posted by lukesayaw View Post
    Hi,

    I am working on a project with the same functionality. The sample code provided is very simple and not database driven. In the sample code, the detail list was already populated with the data from the model i.e. {first}, {last}, and {age} upon initialization. I would like to populate the detail list dynamically with the data from the data source only when the user taps the itemtap of the list. I mean, upon item tap event of the list, a particular id will be retrieved from the tpl e.g {id} and passed to the url for getting the related data from the data source and populate the detail list. How should I solve the problem. Any help would be very much appreciated. \

    Currently I am using Jsonstore and got no problem filling up the first list with data. Actually, I would like to create another list upon itemtap event. Is that possible?
    Many Thanks.
    What I do in my projects is have one list populated by a store where you select an item, an ajax request goes out, the viewable card is switched to the next card, the 2nd store's data is dumped so the list appears empty (ex: BT.store.Friends.loadData({}), while the json data is being fetched and when it comes back it populates the 2nd store for the 2nd list, and the list updates automatically.

  7. #7
    Ext User
    Join Date
    Sep 2010
    Posts
    73
    Vote Rating
    0
    lukesayaw is on a distinguished road

      0  

    Default


    Hello Mike,

    Thanks a lot for your suggestions. It would be clearer indeed if you could please show me some working sample codes since I am stuck with this 3 three days now.

    Thanks so much for your help!

  8. #8
    Ext User
    Join Date
    Sep 2010
    Posts
    73
    Vote Rating
    0
    lukesayaw is on a distinguished road

      0  

    Default


    Helllo,

    By the way how do I update the 2nd store after the ajax call returns the new data from server? something like store2.update(newdata) or something else? And where should i dump the 2nd store data so the list will be empty initially? Many Thanks.

  9. #9
    Ext User
    Join Date
    Sep 2010
    Posts
    73
    Vote Rating
    0
    lukesayaw is on a distinguished road

      0  

    Default


    I found the solution.Thanks

  10. #10
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    68
    Vote Rating
    0
    iamcam is on a distinguished road

      0  

    Default


    Mind posting the code you found? This thread is pretty helpful and that would be a good way to wrap things up.

    Thanks!

Similar Threads

  1. Adding static panel and list on the same card
    By robertj98 in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 19 Jul 2010, 7:27 AM
  2. Inserting a List in a TabPanel Card
    By nobosh in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 8 Jul 2010, 11:50 AM
  3. Replies: 0
    Last Post: 10 Jun 2010, 11:41 AM
  4. Replies: 13
    Last Post: 30 Oct 2009, 12:44 PM
  5. ComboBox with simple JSON List
    By H.Morch in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 17 Sep 2009, 5:54 AM

Thread Participants: 5

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..."