Question

I am using the MVC architecture (i have gone through the docs on MVC, but i am still lost here) and i need to know how to populate the records on to my Label. I know that i have to get this done by Stores.

I have loaded the values from the store, but unable to display it on my Panel for some reason. here’s my code;

Most of the examples/books demonstrates how to display in a grid, but not a label (I know it has to be the same logic, but i am lost). And it shows how to write to a DB/JSON file and not display the values.

I need to display the COUNTRYNAME in the Label text. This is an example code that i am doing to understand this, can some one help me ?

Ext.define ('ProjectDisplayExample.model.Country',{
    extend: 'Ext.data.Model',
    //
    fields:['countryid','countryname']
    //
});

STORE

Ext.define('ProjectDisplayExample.store.Country',{
    extend:'Ext.data.Store',
    model:'ProjectDisplayExample.model.Country',
    remoteGroup:true,
    proxy: {
        actionMethods : {
            read   : 'POST',
        },
        type: 'ajax',
        url : '/server/country.php'
    }   
});

VIEW

Ext.define('ProjectDisplayExample.view.CountryWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.countrywindow',
    ...........

    initComponent: function() {
        var st = Ext.getStore('Country');
        st.load();
        this.items = [
        {
            items: [
            {
                xtype: 'panel',
                region: 'north',
                items: [{
                    xtype: 'label',
                    // NEED TO DISPLAY COUNTRT NAME FROM THE STORE HERE
                }]
            }]
}

UPDATE

var store = ... // Your store
store.on('load', function() {
    // here store is loaded and you can do anything you want with it
    console.log('store is loaded. number of records = ', store.getCount());
}, this, { single: true });

store.load; // I ADDED THIS LINE.................... <---------

UPDATE 2

this.items = [
            {
                items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    items: [{
                        xtype: 'label',
                        name : f
                    }]
                }]

Answer 1

I will not post a code sample to exactly solve your question, but I will give you couple points:

• Store contains array or records. So you can’t just say give me country name from the store. You need first to get a record, for example: var r = store.getAt(0), and only after that you can get countyname field var f = r.get('countryname').

• Load() method is asynchronous, so you can just execute it somewhere in the code and assume that for the very next line your store is ready. You need to subscribe to the load event, something like:

  var store = ... // Your store
  store.on('load', function() {
      // here store is loaded and you can do anything you want with it
      console.log('store is loaded. number of records = ', store.getCount());
  }, this, { single: true });
  store.load();
  

• Labels as in xtype: label are actually very rarely used in ExtJs. What exactly are you trying to display in that panel? But anyhow… after you get data out of the store you can use something like update() or setValue() or any other method to update component.

Hope this helps…