PDA

View Full Version : Sencha Touch 2 MVC NestedList



kostysh
22 Nov 2011, 3:27 PM
Hi,
I have a problem with NestedList in my test MVC application. I try to create app in ST 2.0 style only.
It seems as it should work but there is no. Help me understand what I'm doing wrong.

Here is code of my application (also on GIT: https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList)



/***Application structure

/index.html
/data/data.json
/app/app.js
/app/controller/Main.js
/app/model/Section.js
/app/model/Product.js
/app/view/Homepage.js
/app/view/Welcomescreen.js
/app/view/Catalog.js
/app/store/Section.js


***/


//app/app.js
//----------------------------------------------------------------------
Ext.Loader.setConfig({
enabled:true
});


Ext.application({
name: 'Myapp',
controllers: ['Main'],

launch: function() {
Ext.create('Myapp.view.Homepage');
}
});
//----------------------------------------------------------------------


//app/controller/Main.js
//----------------------------------------------------------------------
Ext.define('Myapp.controller.Main', {
extend: 'Ext.app.Controller',

views: [
'Homepage',
'Welcomescreen',
'Catalog'
],

models: [
'Product',
'Section'
],

stores: ['Section'],

init: function() {

this.control({

});
}

});
//----------------------------------------------------------------------


//app/view/Homepage.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Homepage', {
extend: 'Ext.tab.Panel',

config: {
fullscreen: true,


tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},


defaults: {
scrollable: true
},


items: [
{
xtype : 'welcomescreen'
},


{
xtype : 'catalog'
}
]
},

initialize: function() {
console.log("Init homescreen");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------


//app/view/Welcomescreen.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Welcomescreen', {
extend: 'Ext.Container',
xtype: 'welcomescreen',

config: {
title: 'home',
iconCls: 'home',

defaults: {
styleHtmlContent: true
},

items: [
{
xtype: 'container',
html: '<h2>Hello world!!!</h2>'
}
]
},

initialize: function() {
console.log("Init welcomescreen");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------


//app/view/Catalog.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Catalog', {
extend: 'Ext.Container',
xtype: 'catalog',

config: {
title: 'My catalog',
iconCls: 'bookmarks',

items: [
{
xtype: 'toolbar',
docked: 'top'
},

{
xtype: 'nestedlist',
store: 'Myapp.store.Section',
displayField: 'name'
}

]
},

initialize: function() {
console.log("Init catalog");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------


//app/model/Section.js
//----------------------------------------------------------------------
Ext.define('Myapp.model.Section', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'items', type: 'auto'}
],

hasMany: {
name: 'products',
model: 'Myapp.model.Product'
}
});
//----------------------------------------------------------------------


//app/model/Product.js
//----------------------------------------------------------------------
Ext.define('Myapp.model.Product', {
extend: 'Ext.data.Model',

fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
],

belongsTo: 'items'
});
//----------------------------------------------------------------------


//app/store/Section.js
//----------------------------------------------------------------------
Ext.define('Myapp.store.Section', {
extend: 'Ext.data.TreeStore',
model: 'Myapp.model.Section',

autoLoad: true,
root: {},

proxy: {
type: 'ajax',
url: 'data/data.json',
reader: {
type: 'json',
root: 'items'
}
}
});
//----------------------------------------------------------------------


//data/data.json
//----------------------------------------------------------------------
{
"items": [
{
"id": "id1",
"name": "Section #1",

"products": [
{
"id": "pr11",
"name": "Product #1"
},
{
"id": "pr12",
"name": "Product #2"
}
]
},
{
"id": "id2",
"name": "Section #2",

"items": [
{
"id": "id22",
"name": "Section #3",

"products": [
{
"id": "pr21",
"name": "Product #3"
},
{
"id": "pr22",
"name": "Product #4"
}
]
}
]
}
]
}
//----------------------------------------------------------------------

rdougan
22 Nov 2011, 4:27 PM
What issues are you facing, exactly? Have you tried looking at the NestedList example code and going from there?

kostysh
23 Nov 2011, 12:25 AM
I want to build an application that fully complies with the recommendations regarding the structure of the application and use classes for Sencha Touch 2.0
Example, contained in the official documentation does not fully meet these guidelines. This example is built on the principle as for version 1.1. If you modify this example to the recommended MVC-style then it does not work (such as mine, with enabled Ext.Loader, defined data store and Ext.tab.Panel).
Please take a look at my code - I think it is correct, but nevertheless nestedlist does not work. I can not understand where the error occurred.

kostysh
24 Nov 2011, 1:37 PM
Hi all, I did it! It works now :)))
Get working example here: https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList

stirucherai
7 Dec 2011, 7:30 PM
Hi,

Get following message and no record visible in My Catlog screen

[DEPRECATE][Ext.dataview.NestedList#updateBackButton] add(index, item) method signature is deprecated, please use insert(index, item) instead
sencha-touch-all-debug-w-comments.js:28685 (file:///D:/Android/kostysh-Sencha-Touch-2.0-MVC-test-application-with-NestedList-b25e9fb/touch/sencha-touch-all-debug-w-comments.js)[DEPRECATE][Ext.data.NodeStore#addManagedListener] addManagedListener() / mon() is deprecated, simply use addListener() / on(). All listeners are now automatically managed where necessary.

Have been tring to load JSON file to store using Sencha Touch 2.0 MVC and so far not sucessful. Works pretty well in 1.x

kostysh
7 Dec 2011, 8:29 PM
All these lines in the console (with [DEPRECATE]), because we use a PR2 version Sencha Touch and a lot of code left from a previous version of ST. I think in the next versions a lot will be fixed.


In my example, there are no problems with JSON loading to store. Try the most recent version from https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList


JSON loading, NestedList and List are working good, but the error "has no method 'isLeaf'" is present, and yet I have no idea how to fix it. Need help.

This error occurred when we doing any "tap" on List item (inside NestedList detailCard).

stirucherai
7 Dec 2011, 9:22 PM
Hmm,

I did download the latest version of your code but not working. No other message (other than what I had pasted in the earlier message)

I did test in Chrome and Safari.

Thanks and Regards
Sarang

kostysh
8 Dec 2011, 5:30 AM
on my local web-server all things working. Also, please try from this link: http://mindsaur.com/mobtest3/
This is the same code, I just tested it on Google Chrome under Linux and Windows (100%)

stirucherai
9 Dec 2011, 3:07 AM
Hi,

Does it work with web-browser - meaning can we directly use file:// (instead of localhost)

Thanks and Regards
Sarang

kostysh
9 Dec 2011, 8:01 AM
locally, we can also gain access to json file,but you need to remove system constraints. Add to your Chrome command line option --allow-file-access-from-files, this should help

but I recommend you install a local web server Apache, then you will be able to fully test your applications.
also to avoid any problems with the CORS, put in root of your site .htaccess file with:

<FilesMatch "\.(json)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Referer"
Header set Access-Control-Allow-Methods "GET,POST"
Header set Access-Control-Allow-Headers "x-prototype-version,x-requested-with"
</IfModule>
</FilesMatch>

stirucherai
9 Dec 2011, 8:59 AM
Hi,
THanks -- I have used "--allow-file-access-from-files". I wanted this to work without webbrowser app I am developing will be deployed in iPad compiled using phonegap.

This worked perfectly in 1.x -- only in 2.x it is not working but no error message as well.

Thanks and Regards
Sarang

kostysh
9 Dec 2011, 1:04 PM
I have not tried to use phonegap. Did you test the aplication on iPad without phonegap?

stirucherai
9 Dec 2011, 4:17 PM
We need to compile with phonegap to get the code working as native app in iPad.

Have you tried running it in Chrome with file:// directly (without webserver). Does it work for you

Thanks and Regards
Sarang

kostysh
9 Dec 2011, 4:25 PM
No, without webserver my example not works. Even with --allow-file-access-from-files
as you say, without any error messages

arpitnj
16 Dec 2011, 4:36 AM
clicking the inner nested listed list does not show the products. The console shows the following error.


Uncaught TypeError: Property 'getMinValue' of object [object Object] is not a function

arpitnj
16 Dec 2011, 5:14 AM
removing the following code from products.js solved it





minValue: 1,
maxValue: 100,

kostysh
16 Dec 2011, 9:42 AM
this problem only in PR3. will be solved in next version of Sencha Touch

edd82
26 Jan 2012, 6:50 AM
Thanks for the code kostysh (http://www.sencha.com/forum/member.php?339050-kostysh), I was hoping to use this to help me get my MVC Sencha 1 app re-written in Sencha 2 but unfortunately the code no longer works for PR4. I get following error:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.viewportview

kostysh
26 Jan 2012, 2:12 PM
I have noticed a problem with PR4. Be sure to understand, it should not be difficult

jtanori
1 Feb 2012, 8:39 PM
I had the same error, looks like the use of a ref object outside the config object is deprecated.

Using the debug-w-comments script gives a good amount of debugging information.
:)

kostysh
2 Feb 2012, 6:09 PM
My sample at GitHub rewrited according to current version of ST2 (Beta 1)... questions or proposition, you are welcome.

ManavMagan
2 Feb 2012, 10:25 PM
if i run the code on device it shows me blank screen.

kostysh
3 Feb 2012, 10:00 AM
Unfortunately, now I can not verify the reason for not running the application

xixichensh
15 Feb 2012, 7:41 AM
Hi
the mvc frame can not popup
I use the mvc frame to develop an app, i find when i define a function to button,such as

text : 'Back',
ui : 'back',
hidden : false,
handler:function(){
var picker = Ext.create('Ext.Picker', {
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});


picker.show();
}


Unfortunately,there are error "Uncaught TypeError: Cannot call method 'getPageBox' of null"........could you give some suggestion to solve the problem,thanks

ardnet
9 Mar 2012, 12:26 AM
Hi kostysh, thanks a lot. I've been having difficulties on using NestedList as well, but when I tried your method, it is working! thx! :)

Anyway, I wanna ask something:
in your Sectionlist.js, you put 'store' as 'Sections', instead of 'Myapp.store.Sections'.
Do you mind explaining why need to do that?

Thanks

kostysh
9 Mar 2012, 4:48 AM
in your Sectionlist.js, you put 'store' as 'Sections', instead of 'Myapp.store.Sections'.
Do you mind explaining why need to do that?

because NestedList view uses a store what already defined inside controller. Look to source code of Sencha Touch NestedList component (method applyStore)


In the controller we can define store as 'Myapp.store.Sections' or as 'Sections' (no difference, because controller uses Ext.Loader what automaticaly find path to store)

GaelenN
19 Mar 2012, 1:19 PM
How can I get a different set of information passed?


items: [ {
title: 'My catalog',
iconCls: 'bookmarks',
xtype: 'sectionslist'
},
^^This... changed to this

items: [ {
title: 'My catalog',
iconCls: 'bookmarks',
xtype: 'featuredlist'
},

doesnt want to pass through no matter how i do it.

Any insite?

kostysh
19 Mar 2012, 1:32 PM
xtype: 'sectionslist'
this xtype defined in file app/view/Sectionslist.js
if you want, you can define your own

GaelenN
19 Mar 2012, 1:46 PM
Ext.define('Myapp.view.Featuredlist', { extend: 'Ext.dataview.NestedList',
xtype: 'featuredlist',

this is what you're suggesting? is there anywhere else it passes through?

kostysh
19 Mar 2012, 1:52 PM
yes, something like this.
and do not forget to add this your view to the views list inside app.js

GaelenN
19 Mar 2012, 1:54 PM
did that, thank you. not sure why that didnt work for me earlier.

leomanpotencial
3 Aug 2014, 5:40 PM
Hi! I can´t make this app in Phonegap. I atual day some things are changed? Phone gap can´t run a APP with 20mb, what can i do? When a generate a modified app with your codes, the app don´t apear in my android tablet. See the QRcode and test it.


https://build.phonegap.com/apps/1033777/share