About Extjs & Sencha Touch. How to get data in Store when define a container?

Question

I'm new to Sencha Touch 2, and have difficulty managing the data in Store.
This is my Store and model.

Ext.define("Evt", {
    extend : "Ext.data.Model",
    config : {
        fields : ['evt_name','evt_start_time','gln_name'],
    },
});

Ext.define('Evts', {
    extend : 'Ext.data.Store',
    config : {
        model : 'Evt',
        autoLoad:true,
        proxy : {
            type:'ajax',
            url:'eventslist.json'
        }
    },
});

var store = new Evts();

Then I want to use the data in store when define a Container.

Ext.define("EvtsList",{
    extend : "Ext.Container",
    requires : "Ext.dataview.List",
    config : { 
        layout : {
        type : 'vbox',
        },
        items : [
            {  xtype : 'titlebar',
               title : "", // To use data 'evt_name' here
               id:'itemTitle',
               docked : "top",
               ui : "dark",
            }
        ],
    },
});

I know that using XTemplate and Ext.data.Store can get data loaded by the proxy in the dataview, but how to get the data in other types such as titlebar?
And how to take out those data in the store to an Object so that I can use methods such as get()?
I think I've expressed it clearly? Sorry I'm Not good at English :)

Answer 1

Let's say you need to set evt_name value of first record from the store.

Ext.define("EvtsList",{
    extend : "Ext.Container",
    requires : "Ext.dataview.List",
    config : { 
        layout : {
            type : 'vbox',
        },
        items : [
            {  xtype : 'titlebar',
             title : '', 
             id:'itemTitle',
             docked : "top",
             ui : "dark",
            }
        ],
    },
    initialize: function(){
        this.callParent(arguments);
         //data will be passed from Ext.create
         this.down('titlebar').setTitle(this.recordData.evt_name);
    }
});

Create store and get the first record

var store = new Evts();   //Create store

store.load({
    callback: function(records, operation, success) {
     var record = records[0]; //Get the first record        
      var data = record.getData(); //Get the data from the record 

      //Create `EvtsList` view and pass the data as config
       Ext.create('EvtsList', {recordData:data}); 

    },
    scope: this
});