Display Panel data on list item tap in Sencha Touch 2

As requested by one of my reader, they need to display the list and panel component in HBox layout. By tapping on any items in the list, their corresponding data needs to be displayed in the panel component in Sencha Touch 2. Let's see the implementation


 Create a Model Class

 First, let' create a list model class with two fields name and text.

 Ext.define('MyApp.model.ListModel', {
    extend: 'Ext.data.Model',
    alias: 'model.ListModel',

    config: {
        fields: [{
            name: 'name',
            type: 'string'
        }, {
            name: 'text',
            type: 'string'
        }]
    }
});

 Create a Store Class

 Now, we are going to create a store and assign the above created model class to the store using store configuration. then, we are going to set some static model data instance to the store using data configuration.

Ext.define('MyApp.store.ListStore', {
    extend: 'Ext.data.Store',
    alias: 'store.ListStore',

    requires: [
        'MyApp.model.ListModel'
    ],

    config: {
        data: [{
            name: 'Sencha Architect',
            text: 'The ultimate HTML5 visual app builder, Sencha Architect empowers your team to design, develop, and deploy apps from a single, integrated environment. Finally, designers and developers can work in lock-step to create amazing applications'
        }, {
            name: 'Sencha Animator',
            text: 'With the power of Sencha Animator, you can build cutting edge interactive CSS3 animations and embed them to your website, iBook, or App. Animate text and images with smooth transitions, design buttons with gradients, and make your animations highly interactive. All backed by the strength of web standards.'
        }, {
            name: 'Sencha Cloud',
            text: 'Sencha.io is a complete cloud platform for building mobile web apps. With services like User, Data, Channel, Image and Deployment, Sencha.io makes it easy to create shared experiences in the cloud.The Sencha.io cloud is currently in beta and open to all developers!.'
        }],

        model: 'MyApp.model.ListModel',
        storeId: 'ListStore'
    }
});

Add List and Panel Component

 Now, we are going to display both list and panel component horizontally using HBox layout. These list and panel components are added inside the container. In list component, itemTpl configuration is used to display record in HTML template. here we are displaying record name . Similarly in panel component, itemTpl configuration is used to display record in HTML template. here we are displaying record text .

 Ext.define('MyApp.view.DemoContainer', {
    extend: 'Ext.Container',
    alias: 'widget.DemoContainer',

    config: {

        itemId: 'democontainer',
        layout: {
            type: 'hbox'
        },

        items: [{
            xtype: 'list',
            flex: 1,
            itemId: 'demolist',
            layout: {
                type: 'fit'
            },

            itemTpl: [
                '<div>{name}</div>'
            ],
            store: 'ListStore'
        }, {
            xtype: 'panel',
            flex: 2,
            itemId: 'demopanel',
            tpl: [
                '{text}'
            ],

            layout: {
                type: 'fit'
            }
        }],

        listeners: [{
            fn: 'onDemolistItemTap',
            event: 'itemtap',
            delegate: '#demolist'
        }]
    },

    onDemolistItemTap: function (dataview, index, target, record, e, options) {

        //console.log(record);
        var container = dataview.up('#democontainer');

        var panel = container.down('#demopanel');

        panel.setData({
            text: record.data.text
        });
    }
});

  Each component is having an itemId configuration which is used to access the component in CSS query format.  On tapping on any items in the list, itemtap event will be trigged and onDemolistItemTap() method will be fired. These mapping are added using the listeners configuration.

  Inside onDemolistItemTap() method, we are accessing the child items of the container using itemId configuration of the component.Finally setData() is used to assign the list record data to the panel component.

 Following is the output, when i run the above code in Google Chrome.

 Hope, you enjoyed this Post.

Download the Source Code