Hi,
I want to have a page with a simple list item.
I have a viewport.js, a data json file, model and view/complexlist.js
So my dir and files looks like this:
app\app.js (loading the viewport.js)
Ext.application({
name: 'Myapp',
views: [
'Complexlist',
'Viewport'
],
controllers: [
//'Main'
],
launch: function(){
Ext.create('Myapp.view.Viewport');
}
});
app\store\complex.js
Ext.define('Myapp.store.complex', {
extend: 'Ext.data.TreeStore',
config: {
autoLoad: true,
model: 'Myapp.model.complex',
proxy: {
type: 'ajax',
url: 'data/complex.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});
the json data\complex.json
{ "complex": [
{ complex_prefix: 'GHS', naam_complex: 'Guldenhuis'},
{ complex_prefix: 'STV', naam_complex: 'Steenvoorde'}
]
}
app\model\complex.js
Ext.define('Myapp.model.complex', {
extend: "Ext.data.Model",
config: {
fields: [{name: 'prefix', type: 'string'}, {name: 'naam_complex', type: 'string'}]
}
});
app\view\Viewport.js
Ext.define('Myapp.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout: 'card',
items: [ {xtype: 'complexlist'} ]
}
});
app\view\complexlist.js
var complexStore = Ext.create("Myapp.store.complex",{
model:'Myapp.model.complex',
defaultRootProperty: 'items'
} );
Ext.define('Myapp.view.Complexlist', {
extend: 'Ext.dataview.NestedList',
xtype: 'complexlist',
config: {
docked: 'top',
store: complexStore
},
getTitleTextTpl: function() {
return '{complex_prefix}';
},
getItemTextTpl: function(node) {
return '<strong>{complex_prefix}:</strong> <em>{naam_complex}</em>';
}
});
I worked hard and tried several options but an error msg or a blank screen.
Later on I have to load other lists based on the user input (tapping on a list item will open another itemlist.
John
Nested list not working
Reply With Quote