Databases
StackOverflow2013
Postsdbo
PODynamically define and load views with different proxy store in Sencha Touch 2
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically define and load views with different proxy store in Sencha Touch 2
    text
    copied!<p>I am creating a mobile application with Sencha Touch 2 that would load its views dinamically depending on a Json response from the server.</p> <p>It means that before the load of the view I have to compose the view with some generic elements. For example, if I receive a Json string from the server corresponding to a <strong>List</strong> view I would have to dinamically fill the list items (<em>name</em>, <em>url</em>, <em>descriprion</em>) with a <strong>store</strong> and a <strong>proxy</strong>.</p> <p>This works, but then I would like to select some item on that list and load another list, but this time I want to change the proxy. My new proxy is the <em>url</em> field from the selected item. I get the <em>url</em> field from the selected item and change the proxy, but this introduces a problem:</p> <p>I am using an <strong>Ext.navigation.View</strong>, and I want to maintain navigation history. In the above case, if I go back in the navigation history the items on the first list change to the items on the last list.</p> <p>I am searching for some kind of workflow to achieve dynamic load of the views depending on independent data for each one, and always maintaining the MVC-Store pattern and the navigation history.</p> <p>This is my model for the list item:</p> <pre><code>Ext.define('ExampleApp.model.ListItem', { extend: 'Ext.data.Model', config: { fields: ['name', 'url', 'descriprion'] } } </code></pre> <p>This is the store for the List:</p> <pre><code>Ext.define('ExampleApp.store.ListItems', { extend: 'Ext.data.Store', config: { autoLoad: false, model: 'ExampleApp.model.ListItem', proxy: { type: 'jsonp' url: 'http://mydomain.com/myjsonresponse', reader: { type: 'json', useSimpleAccessors: true } } } }) </code></pre> <p>This is my view:</p> <pre><code>Ext.define('ExampleApp.view.MyList', { extend: 'Ext.List', xtype: 'mylist', requires: ['ExampleApp.store.ListItems'], config: { title: 'My List', itemTpl: '{name} - {description}', store: 'ListItems' } }) </code></pre> <p>This is the function called on the <strong>itemtap</strong> event of my list:</p> <pre><code>listItemTapped: function (view, index, target, record, event) { var listItems = Ext.getStore('ListItems'); listItems.getProxy().setUrl(record.get('url')); listItems.load(); this.getMain().push({ xtype: mylist }); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload