Simple List with Dynamic Card

[ksystems]

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

[evant]

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);
                        }
                    }]
                }]
            }]
        });
    }
});

[TransformD]

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

[lukesayaw]

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.

[mikeyroy]

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.

[mikeyroy]

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.

[lukesayaw]

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!

[lukesayaw]

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.

[lukesayaw]

I found the solution.Thanks

[iamcam]

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

Thanks!