CODEWITHSUNDEEP
sencha-touchsencha-architectsencha-touch-2.1
Chu Bao .Dev
Chu Bao .Dev

Reputation: 319

Event SelectField Sencha Touch 2.1 and Using Store and Model in it. (in Sencha Architect 2)

I begin learn about Sencha Touch 2. So, I have had many problems to ask! ^^ Let's research it. Now I have a data json like:

{ result: "SUCCESS", national: [ "Afghanistan", "Albania", "Albania", "Algeria", "American Samoa", "Andorra" ] }

Then, I will load it from url: nation.php file. How can i load it to My Select Field.??????

Share and Support to me.! Thanks :).

Upvotes: 0

Views: 1646

Answers (2)

Chu Bao .Dev
Chu Bao .Dev

Reputation: 319

With Viswa's Support. :) I found this problem - XMLHttpRequest cannot load. Origin is not allowed by Access-Control-Allow-Origin error (browser policy security). And Sencha Touch document say: " The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If your application is running on http://domainA.com it cannot use Ajax to load its data from http://domainB.com because cross-domain ajax requests are prohibited by the browser.

" Also, All we need to do is - "Implement all api in Your Webserver" and Follow JsonP's format code: ( in PHP)

$callback = $_REQUEST['callback'];// check callbackkey

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');// output data.

//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

If. Using Sencha Touch 2.1, You can use: 

Ext.data.JsonP.request({
        url: 'http://otherdomain/svn_visaapi/trunk/api/visa_api.php/test_json',
        callbackKey: 'callback',
        success: function(result) {
            console.log(result);
            //Your success function here...
        }
    });

- If, Using Sencha Architect, you can use a Store.proxy.JsonP to call api. - Read more document Sencha Touch 2.1 to see that.

Upvotes: 1

Viswa
Viswa

Reputation: 3211

I don't know how to do this in Sencha Architect 2 ( i am not using it).. but still

Instead of asking question without try (I mean you didn't post tried code here), Better you start with Sencha Touch Documentation.

Anyway, you can do it as follows

Model

Ext.define('AppName.model.countries', {
    extend : 'Ext.data.Model',

    config: {
        fields: [
               {name: 'name', convert: function(value, record) {
                                return record.raw;
               }}
            ],
    }
});

Store

var myStore = Ext.create("Ext.data.ArrayStore", {
  model : 'AppName.model.countries',
  proxy: {
    type: "ajax",
    url : "nation.php",
    reader: {
        type: 'json',
        rootProperty : function(data) {
            return data.national;
        }
    }        
    },
    autoLoad: true
 });

Select Field in View

 Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [{
       xtype: 'selectfield',
       store: myStore ,
       valueField:'name',
       displayField:'name'
    }]
});

Upvotes: 3

Related Questions