PDA

View Full Version : Sencha Touch 2 Nested list not displayed



iGriffer
10 May 2013, 6:13 AM
I'm trying to display NestedList with json on my hard disk, but it is not displayed. What am I doing wrong? No bugs in Chrome. (Chrome open with
Applications / Google \ Chrome.app / Contents / MacOS / Google \ Chrome - allow-file-access-from-files). I get a blank screen without a single error in the console. If I comment fullscreen: true, in MyPanel.js I get clear NestedList without any data.

Servlet.json


{
"stream":[{
"post_id": "1",
"post_type": "text",
"post_thumb": "bla1"
}]
}


MyPanel.js


Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.dataview.NestedList',
alias : 'widget.MyPanel',

config: {
store : 'Storere',
title: 'NestedList Example',
detailCard: {
html: 'You can see detail information here!'
}
}
});


Storere.js


Ext.define('MyApp.store.Storere', {
extend: 'Ext.data.TreeStore',

config: {
model: 'MyApp.model.MyModel',
defaultRootProperty : 'stream',
proxy: {
type: 'ajax',
url: '.\/app\/Servlet.json',
reader: {
type: 'json',
rootProperty: 'stream'
}
}
}

});


MyModel.js


Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'post_id', type: 'string' },
{name:'post_type', type: 'string' },
{name:'post_thumb', type: 'string' }
]
}
});


TheWorld.js


Ext.define('MyApp.controller.TheWorld', {
extend : 'Ext.app.Controller',

config: {
profile: Ext.os.deviceType.toLowerCase(),
control: {
'MyPanel': {
activate: 'onActivate',
leafitemtap: 'onDetailDisplay'
}
}

},

onActivate: function() {
console.log('Main container is active');
},

onDetailDisplay: function(nestedList, list, index, target, record) {
console.log('onDetailDisplay is active');
var detailCard = nestedList.getDetailCard();
},

onItemTap: function(view, list, index, target, record, event) {
console.log('Item was tapped on the Data View');
},

init: function() {
console.log('Controller initialized');
},
});


app.js


Ext.Loader.setConfig({
enabled: true
});

Ext.application({
name: 'MyApp',
appFolder: 'app',

requires: [
'MyApp.model.MyModel',
'MyApp.store.Storere',
'MyApp.view.MyPanel',
'MyApp.controller.TheWorld',
],

models : ['MyModel'],
stores : ['Storere'],
views : ['MyPanel'],
controllers: ['TheWorld'],

launch: function() {
console.log('Application launch');
Ext.create('Ext.Container', {
fullscreen : true,
layout : 'fit',
//layout: 'vbox',
items: [{
xtype: 'MyPanel',
flex: 1
}]
});


}
});


partly solved on http://stackoverflow.com/questions/16482364/sencha-touch-2-nested-list-not-displayed

mitchellsimoens
12 May 2013, 6:20 AM
I don't see you using the displayField config on the nestedlist which tells it what field to display.