Results 1 to 3 of 3

Thread: list detail page?

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    6

    Default list detail page?

    Hi to all,

    i am using sench plus phonegap. and below is my code,

    Code:
    Ext.regModel('HitrateRegel',{
    fields:[
    {name:'title',type: 'string'},
    {name:'description',type: 'string'}
    ]
    });
    
    var HitrateStore = new Ext.data.Store({
    model: 'HitrateRegel',
    proxy: {
    type: 'ajax',
    url: 'http://50.18.58.237:8080/app/a3/cat/u1',
    reader: {
    type: 'xml',
    record:'category'
    }
    },
    listeners: {
    load: function(store, records, success) {
    console.log(store);
    console.log(records);
    console.log(success);
    }
    }
    });
    
    testtpl = '<div class="contact"><table><tr><td><strong>{title}</strong><br>{description}</td></tr></table></div>';
    
    topics = new Ext.List({
    tpl:'<tpl for=".">'+ testtpl +'</tpl>',
    xtype: 'list',
    cls: 'demo-list',
    itemSelector: 'div.contact',
    iconCls: 'topicIcon',
    title:'Topics',
    store: HitrateStore,
    listeners: {
    beforeactivate: function(c)
    {
    HitrateStore.load();
    }
    }
    });
    Code is working fine for displaying list, now what i want, want to
    display list detail page. when any one click on it will display it's
    detail page. I tried all possibilities but not getting success. Can any
    help me how can i do it.

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    17

    Default

    Hi Andy,

    choose a card layout with a mainPanel. Add your list on the first card, your detailView on the second card.
    On the tap event / discloser event in the list show the second card with your data.


    I made a little example on the list example:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
    
            var groupingBase = {
                itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
                selModel: {
                    mode: 'SINGLE',
                    allowDeselect: true
                },
                grouped: true,
                indexBar: true,
    
                onItemDisclosure: {
                    scope: 'test',
                    handler: function(record, btn, index) {
    
                        p.setActiveItem(1);
                   //    alert('Disclose more info for ' + record.get('firstName'));
                    }
                },
    
                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'firstName',
    
                    getGroupString : function(record) {
                        return record.get('firstName')[0];
                    },
    
                    data: [
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Ape', lastName: 'Evilias'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Ape', lastName: 'Evilias'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Ape', lastName: 'Evilias'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Ape', lastName: 'Evilias'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                        {firstName: 'Michael', lastName: 'Mullany'},
                        {firstName: 'Abraham', lastName: 'Elias'},
                        {firstName: 'Jay', lastName: 'Robinson'},
                        {firstName: 'Zed', lastName: 'Zacharias'}
                    ]
                })
            };
            
               //list Button
                    
                    var backButton = new Ext.Button({
                        text: 'Back',
                        ui: 'back',
                        handler: function(){
                            p.setActiveItem(0);
                        },
                        scope: this
                    });
            
    
                var infoPanel = new Ext.Panel({
                        style: 'background-color: white;',
                        layout: 'card',
                            dockedItems: [{
                            xtype: 'toolbar',
                            height: '50px',                        
                            dock: 'top',
                            ui:'dark',
                            items: [backButton]
                        }],
                        defaults: {
                            flex: 1
                        },
    
    
                            scroll: 'vertical',
                            style: 'background-color: white;',
                            styleHtmlContent: true,
                            html: ['your data or other stuff'],
    
                    });
    
              var yourList =    new Ext.List(Ext.apply(groupingBase, {
                    floating: true,
                    width: 350,
                    height: 370,
                    centered: true,
                    modal: true,
                    hideOnMaskTap: false
                }));
    
            if (!Ext.is.Phone) {
    
                  var p = new Ext.Panel({
    
              fullscreen: true,
              scroll: false,
              layout: 'card',
              items: [yourList,infoPanel],
          });
          p.setActiveItem(0);
    
    
            }
            else {
                new Ext.List(Ext.apply(groupingBase, {
                    fullscreen: true
                }));
            }
        }
    });

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    6

    Default

    Thanks Milo08 for your replay,

    Still it not working. can you give example.

    Thanks

Similar Threads

  1. List Component and Detail View
    By Andrel in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 22 Jun 2011, 12:22 AM
  2. list detail page?
    By andy.s in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 24 Jan 2011, 4:49 PM
  3. list detail panel/view
    By axxerion in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 16 Nov 2010, 10:02 AM
  4. detail view from List within TabPanel?
    By merry andrew in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 22 Jul 2010, 5:56 PM
  5. List/Detail/Thumbnail view
    By d95sld95 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2008, 1:27 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
  •