0

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 :).

Chu Bao .Dev
  • 319
  • 2
  • 14

2 Answers2

3

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'
    }]
});
Viswa
  • 3,211
  • 5
  • 34
  • 65
  • Thank for your answer! I will follow this post to use for Sencha Architect (S.A) . Because S.A helps me to learn Sench Touch further. ^^ Now, I'm a newbie in this framework. I will try read more document. – Chu Bao .Dev Jun 14 '13 at 08:22
  • Ok, But i use Sencha Architect, So, it has some differences: rootProperty : function(data) { return data.national; } – Chu Bao .Dev Jun 14 '13 at 09:33
  • No, Viswa! Just "rootProperty" a config property of S.A. It just a value ( string not function). And my Store load success normally without using 'rootProperty'.:) So many problems ^^. – Chu Bao .Dev Jun 14 '13 at 09:59
  • Just give rootProperty value as "national" and see, i think that will also work.. print you store data length.. using console.log(store.getData().length); – Viswa Jun 14 '13 at 10:45
  • Viswa!I used rootProperty as 'national'. But S.A show message "Unable to load data. Click to view error." So How? ^^ – Chu Bao .Dev Jun 17 '13 at 02:17
  • @Chu Bao .Dev i used rootProperty as 'national' and its working.. are you using the code i posted, else can you update your question with your model and store code.. so that i can understand problem clearly. – Viswa Jun 17 '13 at 04:26
  • Can you use Sencha Architect?Viswa. This api: http://api.vietnamvisaform.com/visa_api.php/national I don't read it when use rootProperty. – Chu Bao .Dev Jun 17 '13 at 07:39
  • 1
    are you getting not allowed by Access-Control-Allow-Origin error? – Viswa Jun 17 '13 at 08:02
  • you said "Unable to load data. Click to view error." message is showing.. if it is. click it and tell me what the error message is? – Viswa Jun 17 '13 at 08:22
  • That's right, I think I don't know about Access-Controll-Allow-Origin in Sencha Touch ( in S.A). How to fix that? Because i use directly Ext.ajax.request. It showed this one. – Chu Bao .Dev Jun 17 '13 at 10:42
  • This's my issue posted, but can't fix it.http://stackoverflow.com/questions/17100666/xmlhttprequest-cannot-load-and-sencha-touch/17121826?noredirect=1#17121826 – Chu Bao .Dev Jun 17 '13 at 10:44
  • finally we found the problem.. ya your responding server need to allow cross domain other wise you can't fix it.. if you can change the server code you can do that.. but i think in your case you can't do that.. am i right? – Viswa Jun 17 '13 at 10:54
  • Ps: Store Sencha Architect show message, ^^ but have place to click. You can download Sencha Architect trial version to test like me. – Chu Bao .Dev Jun 17 '13 at 11:01
  • my trial version is over without event building a app.. i am very much comfortable without Sencha Architect thats why i didn't get any interest in SA.. also what you mean "Store Sencha Architect show message, ^^ but have place to click" – Viswa Jun 17 '13 at 11:14
  • Sorry! My English is wrong. :) "Store Sencha Architect show message, ^^ but have place to click" mean when use S.A, It is a MVC model. And i reload use this store, it show message. But don't know where i can see this error. That's it!!! ^^ And,Thank for all your sharing. I am going use Sencha Touch like you. :) This is my skype : zhouask1011. – Chu Bao .Dev Jun 17 '13 at 17:39
  • ! I began coding by Sencha Touch 2.1. I used all your sourcecode. But it still show error message "Access-Controll-Allow-Origin". Can you recheck for me with this api?: http://api.vietnamvisaform.com/visa_api.php/national. – Chu Bao .Dev Jun 18 '13 at 04:12
  • This is not problem from sencha code.. this problem comes only in computer browser because of server.. after you building app this error will not come.. so for the purpose of testing now you have to disable web security in your browser.. which os your using? – Viswa Jun 18 '13 at 04:21
  • if you built this api (api.vietnamvisaform.com/visa_api.php/national) you can change the server api code to support Access-Control-Allow-Origin. – Viswa Jun 18 '13 at 04:26
1

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.

Chu Bao .Dev
  • 319
  • 2
  • 14