javascript - ExtJS 5 first steps, cannot see a simple grid with one store -


i'm trying become familiar ext js 5. took sencha generated app start point , modified see grid of 1 line. page blank. can anyone, please, show me doing wrong? not familiar mvvm pattern want learn it.

here's set of files:

enter image description here

and here js sources.

applications.js

ext.define('admin.application', {     extend: 'ext.app.application',     name: 'admin' }); 

base.js (base class models)

ext.define('admin.model.base', {     extend: 'ext.data.model',     schema: {         namespace: 'admin.model'     } }); 

item.js (a simple model)

ext.define('admin.model.item', {     extend: 'admin.model.base',      fields: [         { name: 'id', type: 'int' },         { name: 'title', type: 'string' }     ] }); 

itemlist.js (a store of items want show in grid)

ext.define('admin.store.itemlist', {     extend: 'ext.data.store',      alias: 'store.itemlist',     model: 'admin.model.item',     data: [{id: 1, title: 'title1'}] }); 

itemlistgrid.js (the panel grid)

ext.define('admin.view.main.itemlistgrid', {     extend: 'ext.grid.panel',      requires: [         'admin.store.itemlist'     ],      alias: 'widget.itemlistgrid',      bind: {         store: '{itemlist}',          title: '<b>some title</b>',          columns: [{             text: 'id',             dataindex: 'id'         },{             text: 'title',             dataindex: 'title'         }]     } }); 

main.js

ext.define('admin.view.main.main', {     extend: 'ext.container.container',     requires: [         'admin.view.main.maincontroller',         'admin.view.main.mainmodel',         'admin.view.main.itemlistgrid'     ],      xtype: 'app-main',      controller: 'main',     viewmodel: {         type: 'main'     },      layout: {         type: 'border'     },      items: [{         xtype: 'panel',         //region: 'west',         width: '100%',         items: [{             xtype: 'itemlistgrid'         }]     }] }); 

maincontroller.js

ext.define('admin.view.main.maincontroller', {     extend: 'ext.app.viewcontroller',     alias: 'controller.main' }); 

mainmodel.js

ext.define('admin.view.main.mainmodel', {     extend: 'ext.app.viewmodel',      alias: 'viewmodel.main',      data: {         name: 'admin'     },      bind: {         store: '{itemlist}'     } }); 

the sencha app build builds app without errors. don't see grid. before tried default generated app , showed in browser ok.

thank you.

here's exact answer question https://www.sencha.com/forum/showthread.php?299703-extjs-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -