Sencha ExtJS MVC - data source specified at run time -

i want write proof-of-concept app along these lines:

view

- url text input field @ top go button - big div underneath consisting of rest of view 

controller

- upon go pressed, validate url text - set url data source - read data data source - create nested div element each data, apply css rules - add element big div 

model

- define fields - define default ordering 

css

- define styles 

first, have written above work within extjs or fighting framework? in particular, inserting plain html element nodes.

second, know of existing project under gpl act starting point? far i've seen flashy examples urls hard-coded , set auto-load.

there's nothing scary or otherwise disturbing in you've written.

although not advertised, extjs handles custom html & css pretty well. can set using html or tpl config options. latter powered xtemplates, can loops, etc. when using these options and/or custom css, ext calculate layouts around rendered result, accounting custom style automatically. now, in practice, that's whole lot of work framework, , doesn't work expected, , won't work @ on browsers (like not old ie, of course). 1 big pitfall should aware of should use integer value in px css, since if dimension resolve decimal value in px, ext choke on that.

that said, since you're apparently going data model, should use dataview. that's component let use custom html on regular ext store. provides goodies item selection, paging, etc. it's base class of other advanced data views, ext grids.

regarding urls, don't have hardcode them in model's proxy (or elsewhere). can pass url existing store's load method (as documented here).

finally, don't know of existing projects, poc straightforward, here's fiddle started. code not 100% clean, in particular defining in single file, , missing requires... illustrates of points you've asked about. read docs components / methods used learn how go beyond this.

here's fiddle's code:

ext.define('foo.model.item', {     extend: 'ext.data.model',     fields: ['name'] });  ext.define('foo.view.maincontroller', {     extend: 'ext.app.viewcontroller',      alias: 'controller.main',      ongo: function() {         var view = this.getview(),             url = view.down('textfield').getvalue(),             dataview = view.down('dataview'),             store = dataview.getstore();         if (this.isvalidurl(url)) {             store.load({url: url});         } else {             ext.msg.alert(                 "invalid url",                 "this url cannot loaded here: " + url             );         }     },      // private     isvalidurl: function(url) {         return ['data1.json', 'data2.json'].indexof(url) !== -1;     } });  ext.define('foo.view.main', {     extend: 'ext.panel',      xtype: 'main',     controller: 'main',      layout: {         type: 'vbox',         align: 'stretch'     },      items: [{         xtype: 'container',         layout: 'hbox',         margin: 3,         defaults: {             margin: 3         },         items: [{             flex: 1,             xtype: 'textfield',             emptytext: "valid inputs 'data1.json' or 'data2.json'",             listeners: {                 specialkey: function(field, e) {                     if (e.getkey() === e.enter) {                         // custom event, fun of                         field.fireevent('enterkey', field, e);                     }                 },                 // custom can bound controller in "modern ext" way                 enterkey: 'ongo'             }         },{             xtype: 'button',             text: "go",             handler: 'ongo'         }]     },{         flex: 1,         xtype: 'dataview',         margin: '0 6 6 6',         cls: 'my-dataview', // css styling         store: {             model: 'foo.model.item',             autoload: false             // default proxy ajax , default reader json,             // cool         },         tpl: '<tpl for=".">' + '<div class="item">{name}</div>' + '</tpl>',         itemselector: '.item'     }] });  ext.application({     name : 'foo',     mainview: 'foo.view.main' }); 

some css data view:

.my-dataview .item {     padding: 1em;     border: 1px solid cyan;     color: magenta;     float: left;     margin: 6px;     width: 100px; } 

and example json response (this bare minimum functional... read proxies & reader go further):

[{     name: 'foo' },{     name: 'bar' },{     name: 'baz' }]