CODEWITHSUNDEEP
javascriptextjsextjs4sencha-touchsencha-touch-2
siva565
siva565

Reputation: 499

Sench Touch 2 get container data /store dynamically

I want to get container data dynamically. Can any one help me to display the container items dynamically. The date or store url may be some external page, I want to get the container store/date using MVC. Can any help me?

Below is my code

Ext.define('Mvcapp.view.LayoutList',{
extend: 'Ext.Container',
xtype: 'layoutlist',

config:{
        title: 'Layout',
        iconCls:'star',
        styleHtmlContent: true,
        items:[{
        data: [{
            fname: 'Stratton',
            lname: 'Sclavos',
            role: 'Executive Chairman'
        }, {
            fname: 'Michael',
            lname: 'Mullany',
            role: 'CEO'
        }, {
            fname: 'Ted',
            lname: 'Driscoll',
            role: 'Vice President Worldwide Sales'
        }, {
            fname: 'Abraham',
            lname: 'Elias',
            role: 'Chief Technical Officer'
        }, {
            fname: 'Jeff',
            lname: 'Hartley',
            role: 'Vice President of Services and Training'
        }, {
            fname: 'Adam',
            lname: 'Mishcon',
            role: 'Vice President of Operations'
        }, {
            fname: 'Judy',
            lname: 'Lin',
            role: 'Vice President of Engineering'
        }], // data
      tpl: '<tpl for="."><div style="float:left;width:300px;"><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div></tpl>'
      }]

}
});

Upvotes: 1

Views: 1193

Answers (1)

SachinGutte
SachinGutte

Reputation: 7055

Things you need to do is, first define a model having required fields. Next create a store and set model config to previously defined. While defining the store you need to choose from various proxies sencha touch has give. If you are building app that is to be built for mobile phones then there's not much choice to make. You simply have to use JsonP proxy.

Here's what I'd do - 

     var listitem=Ext.define('ListItem', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['fname','lname','role']
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: listitem,
        autoLoad: true,
        proxy: {
            type: 'jsonp',
            url: 'http://localhost/json_feed_url.php',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    });
    var myList = Ext.create('Ext.List', {
        styleHtmlContent:true,
        store:store,
        itemTpl:['<div style="float:left;width:300px;"><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div>']
    });
    Ext.Viewport.add(myList);

As you can see, i first defined model for our store. Store is created using JsonP proxy and it is set to load automatically. I've also set up reader, that will read the response received from server and parse it. I don't have to worry about it anymore now because all I've to do it just set the rootPropery.

Next a list is created and previously defined store is assigned in it's config. So whenever this piece of code is run, store will get data from server and display it in list. Guess that's what you want.

To start, just put this piece inside launch method of your app.js and you're good to go. In case you want php code here's it - 

<?php header('Content-type:application/javascript');
$items =array();
$items[] = array('fname'=>'A','lname'=>'B','role'=>1);
$items[] = array('fname'=>'C','lname'=>'D','role'=>2);
$items[] = array('fname'=>'E','lname'=>'F','role'=>3);
$items[] = array('fname'=>'G','lname'=>'H','role'=>4);
$items[] = array('fname'=>'I','lname'=>'J','role'=>5);
print $_GET['callback'].'('.json_encode(array('data'=>$items)) .')';
?>

I'm familiar with php n all, but you can use whatever suits you. Idea is same. :D

Upvotes: 2

Related Questions