PDA

View Full Version : How to split demo Layout-Browser into MVC Architecture?



Tomeo
2 Oct 2011, 12:00 PM
Hi folks,

I would like to rewrite a structure of "Layout-Browser" demo which keeps all objects within a few files into a recommended MVC Architecture, like written in documentation. Unfortunately I'm struggling with it.

Layout-Browser demo:
http://dev.sencha.com/deploy/ext-4.0.2a/examples/layout-browser/layout-browser.html

MVC Architecture url:
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture (http://docs.sencha.com/ext-js/4-0/#%21/guide/application_architecture)

Currently, demo's main file "layout-browser.js" creates views, stores, controllers within this one file, but I would like to rewrite it, so it will be easier readable and easier to understand to learn EXTJS 4.


Current demo structure:

[layouts]
basic.js
combination.js
custom.js
[images]
layout-icon.gif
... other images ...
tree-data.json
layout-browser.js
layout-browser.css
layout-browser.html


Expected result: Application will work the same way as demo, but code will be separated into related ".js" files to satisfy MVC architecture:



[data]
tree-data.json

[app]
[view]

Viewport.js
ContentPanel.js
... other view files ...


[store]

... store files ...


[model]

... model files ...


[controller]

... controller files ...


app.js

[extjs]

... extjs 4 files ...

index.html



Many thanks for your help.

Tomas

Tomeo
3 Oct 2011, 4:29 AM
So far I did:
index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Layout demo</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!-- <script type="text/javascript" src="ext-4.0/ext-debug.js"></script> -->

<script type="text/javascript" src="app/view/basic.js"></script>

<script type="text/javascript" src="app/app.js"></script>

</head>
<body></body>
</html>


apps/app.js


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

Ext.application({
name: 'LB',

autoCreateViewport: true,

/*
,models: ['MainNavigation']
,stores: ['MainNavigations']
,controllers: ['MainNavigation']
*/
});


app/view/Viewport.js


Ext.define('LB.view.Viewport', {
extend: 'Ext.container.Viewport',


requires: [
'LB.view.ContentPanel',
'LB.view.TreePanel',
'LB.view.DetailsPanel'
],

layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1> Ext.Layout.Browser</h1>',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [{
xtype: 'treePanel'
},
{
xtype: 'detailsPanel'
}
]
},
{
xtype: 'contentPanel',
flex: 1
}
],
renderTo: Ext.getBody()

});


app/view/ContentPanel.js


/*
var detailEl;
// Gets all layouts examples
var layoutExamples = [];
Ext.Object.each(getBasicLayouts(), function(name, example) {
layoutExamples.push(example);
});


Ext.Object.each(getCombinationLayouts(), function(name, example){
layoutExamples.push(example);
});

Ext.Object.each(getCustomLayouts(), function(name, example){
layoutExamples.push(example);
});
*/

Ext.define('LB.view.ContentPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.contentPanel',

id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false
,items: layoutExamples
//,html: '<p class="details-info">Some text ....</p>'

});



app/view/TreePanel.js



Ext.define('LB.view.TreePanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.treePanel',

id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true
//,store: store

});


app/view/DetailsPanel.js


Ext.define('LB.view.DetailsPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.detailsPanel',

id: 'details-panel',
title: 'Details',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true,
html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'

});


Where should be placed variable "layoutExamples" and how to correctly call it from ContentPanels.js?
The same for tree functionality.

Experts, please help a newbie to move forward with ExtJS 4.

Tomas

skirtle
3 Oct 2011, 10:07 AM
In case you haven't seen it already:

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/

Personally I think the MVC is quite an advanced topic and not one I'd suggest for a newbie. The MVC itself is quite easy but designing the internal architecture of an application is difficult and that seems to be the bit you're struggling with. There are usually many ways to do the same thing and there is rarely a 'correct' answer. Decisions like this usually take some careful thought and a bit of trial and error, even an 'expert' will struggle to pluck a really good answer out of the air first time.

I think the hands-on approach you've adopted is a good way to learn the MVC but porting that particular demo strikes me as a bit awkward. I'm not saying it couldn't be done but I doubt it will be pretty. Instead I'd suggest picking a real desktop application (a media player or email client, for example) and try mocking up an equivalent UI in ExtJS.

Tomeo
4 Oct 2011, 7:05 AM
Hi Skirtle,

Thanks for your reply.

Yes, I've already read mentioned article, it's very good and I like it.

As you mentioned, I'm struggling with MVC architecture, but that's the main reason why I would like to understand it on some simple app like Layout-Browser demo.

The other reason for that demo is, that for my application which I'm starting to build (from "desktop application") a demo's layout suit's the best. It's simple, but generic at the same time. Within application I'll use a navigation tree menu retrieved from database (based on logged person) - west region, Info about logged person will be stored in north-region, bottom part = status bar and center region will usually display some grid, resp. form. Should be pretty simple application.

And as I'm at the beginning with it, I would like to start with "clean" MVC project. Other option is to continue to build my application based on existing demo.

But as I mentioned, at the beginning it's the best to have a 1 application (eg. layout-browser) written in 2 ways (current demo version and MVC architecture version) and then compare structure and it's logic + how it's splitted into related files, classes, ...

Thanks,
Tomas

PS:
In ExtJS area I'm just a beginner, but in general I've been developing db applications (mostly Oracle based) for many years.

skirtle
4 Oct 2011, 1:07 PM
And as I'm at the beginning with it, I would like to start with "clean" MVC project. Other option is to continue to build my application based on existing demo.

For most non-trivial applications I would recommend the MVC. The application you've described sounds like a good candidate for using it.


But as I mentioned, at the beginning it's the best to have a 1 application (eg. layout-browser) written in 2 ways (current demo version and MVC architecture version) and then compare structure and it's logic + how it's splitted into related files, classes, ...

I wouldn't advise using the code behind the Layout Browser demo as an example to learn ExtJS, it isn't really intended to be used that way. As with most software development, an irritating reality is that the quickest way to write a short example app is to ignore best practices and hack it. As soon as you try to make that example 'real' the hacks will bite you. The Layout Browser should be viewed as pragmatic, it is only a small example so 'hacking it' was appropriate in the circumstances.

brokentwig
4 Oct 2011, 8:25 PM
I have to second skirtle, as a n00b myself, I've found nothing but distress in attempting to follow the non MVC application examles while building a MVC app. Since MVC is distributed, getting a hold of various objects, actions, and layouts is different using MVC. You almost have to just read the whole Class API documentation and trial and error it. Make sure you get Firebug...

Tomeo
4 Oct 2011, 10:57 PM
Thanks for reply folks!

Ok, I agree with you. I'll forget about converting non MVC demo into MVC, and I'll start with a clean one. I know it won't be an easy, but will try.

Cheers,
Tomas