Ext. Direct and Grid Tutorial - Code updated to ExtJs 4 Architecture from version 3.

[rakagod]

I updated the sample code of the "Ext. Direct and Grid Tutorial" to the new architecture of ExtJs4.
The current sample is a version 3 architecture, it uses "Ext.onReady".

I am new at this and I needed a working sample to set up a new system and I thought I would provide some help to other beginners.

The full "ExtJs4 architecture" does not play nicely with 'Ext.direct" when it comes to the "stores: [ ]," element in the application file (app.js).

The new architecture of this sample is:
AppName
app
controller
-GridController.js
model
-PersonalInfo.js
store
-Store.js
view
-Grid.js
images
... as per original sample
php
... as per original sample
-app.js
-index.html
-style.css

I hope this is helpful to others.

[mitchellsimoens]

The full "ExtJs4 architecture" does not play nicely with 'Ext.direct" when it comes to the "stores: [ ]," element in the application file (app.js).

This is probably due to your Model's proxy is defining the api that is using pure JS so if QueryDatabase.* is not present, then it will error out if you try to use it because it's undefined. For Direct, it is best to place these in the constructor of the Store as it will be referenced when the store is created. Even then, using it in the Controller, the store may be created before the api is returned and there really isn't much to be done to protect devs from this.

[rakagod]

Thank you for your help.

For Direct, it is best to place these in the constructor of the Store as it will be referenced when the store is created.

I tried that and the application starts and displays without errors but now gets a
"TypeError: Cannot call method 'indexOf' of undefined"
in my "GridController" logic for the "edit" event;
which I don't know how to fix.

Even then, using it in the Controller, the store may be created before the api is returned and there really isn't much to be done to protect devs from this.

As you indicated, when I do the above code change I still get the error message when I try to use:
...
stores: ['Store'],
...
in app.js.

Unfortunately, it appears that my original claim

The full "ExtJs4 architecture" does not play nicely with "Ext.direct" when it comes to the "stores: []" element.

is still correct.
But by using the proposed code based on the version 3 sample, I should be able to work around it. I hope.

Thank you again for your suggestions as they help me get a better handle on ExtJs.

[danielleng]

rakagod thank you very much this helps a lot. I've been in the dark about this tutorial cause I've never learned ExtJs 3... and as a newbie trying to get into Ext JS 4 AND trying to follow the new MVC architecture, it can be a little frustrating.

I have some questions about the way my code is laid out...
app.js : creates the controllers and views
controller : creates the models
view : creates the store

My program works properly using this layout, but is it the correct way of doing things?
I'm using a slightly different approach in writing my app.js compared to yours.

launch: function()
{
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'south',
xtype: 'grid1',
height: 250,
minHeight: 250
},
...

And i find that i could use

'grid1':{
edit: this.updateFields
}
...

in my Controller script. There was no need to refer to the itemID of the grid.


Once again thank you for your code
*and yes I cannot declare my stores in app.js.

[rakagod]

I have some questions about the way my code is laid out...
app.js : creates the controllers
controller : creates the views and models
view : creates the store

My program works properly using this layout, but is it the correct way of doing things?
.

Sorry, the answer that follows is based on the misunderstanding that you are asking me if having the "view: creates the store" is the correct way of doing things as far as the "stores" array is concerned.

The answer to the question you are actually asking (I hope) is given in a later post.

I offer no guarantees as I am also a beginner, but it appears from the available documentation (see below) that it is correct and that other variations would also be correct.

It appears that the correct way is:

• that it makes sense
• and that it loads the files before they are needed.

I have come across this sample code which illustrates another approach.

Ext.application({

name: 'Pandora',

autoCreateViewport: true,

models: ['Station', 'Song'],

stores: ['Stations', 'RecentSongs', 'SearchResults'],

controllers: ['Station', 'Song']

});

---

I have not yet determined if I can put the arrays multiple times without impact (i.e the application already knows that those files are loaded when it encounters them again).

The official documentation "MVC Architecture" found at
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture
with its code sample available under the Ext JS 4 SDK download, inside the "examples/app/simple folder";
shows the "stores array" under the "controllers array" as well.

As a matter of fact, the "Ext.app.Application" documentation at
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Application
puts the "models array" in the "app.js" file with the "controllers array".

In its section "Telling Application about the rest of the app" it states their purpose and benefits.
Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will automatically load all of our app files for us. This means we don't have to manually add script tags into our html files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire application using the Ext JS 4 SDK Tools.

It also states

Note that we didn't actually list the Views directly in the Application itself (app.js). This is because Views are managed by Controllers, so it makes sense to keep those dependencies there.

As a beginner I found the following confusing as I tried figuring out the architecture.
We have been talking about 4 arrays called

the controllers array,
the views array,
the models array
and the stores array.

Please note that the names are plural.
The singular "store" is a configuration element to identify the store used by a view.
The singular "model" is a configuration element to identify the model used by a store.

Note:
I have not yet been able to distinguish clearly the difference, if any, between the "requires array" and the other 4 above.
The article "Using Ext Loader for Your Application" at
http://www.sencha.com/blog/using-ext...r-application/
still leaves me confused about the differences.

---

I hope this has been of help to you.

[danielleng]

It appears that the correct way is:

• that it makes sense
• and that it loads the files before they are needed.

I have come across this sample code which illustrates another approach.

Ext.application({

name: 'Pandora',

autoCreateViewport: true,

models: ['Station', 'Song'],

stores: ['Stations', 'RecentSongs', 'SearchResults'],

controllers: ['Station', 'Song']

});

I have not yet determined if I can put the arrays multiple times without impact (i.e the application already knows that those files are loaded when it encounters them again).

As a beginner I found the following confusing as I tried figuring out the architecture.
We have been talking about 4 arrays called

the controllers array,
the views array,
the models array
and the stores array.

Note:
I have not yet been able to distinguish clearly the difference, if any, between the "requires array" and the other 4 above.
The article "Using Ext Loader for Your Application" at
http://www.sencha.com/blog/using-ext...r-application/
still leaves me confused about the differences.

---

I hope this has been of help to you.

Thank you for taking the time to link and quote those examples above. I understand it better now.
I like the quoted example (above) of declaring Models/Stores/Controllers arrays in the Ext.application. However in my code I still need to declare the Models array inside my controller (as opposed to declaring it in app.js) for it to work.
Following the above example, even after declaring the Models array inside app.js, we would still need to reference it in the Store class rite ? Say...
-StoreA.js

model: 'app.model.ModelA'

If so then there's really no need to do it in app.js ? Its just writing extra code for no reason. I could skip declaring models array in app.js and it would still work.

I used an itemId since it appeared easier for me while testing out the the "Ext.Designer" software.
I use the trial version as a gui for my layouts. It does also have a leaning curve.

Ah, that makes sense. I think I just learned a new tip.

I am not yet at ease with the "viewport" concept.

Yes I am aware that the Viewport should be created as a view rather than explicitly created in the Launch function of app.js. It seems easier to have the application's "main" panel be created in app.js, and then add the other views from there.
According to the API the viewport is "a specialized container representing the viewable application area (the browser viewport)." And since there can only be 1 viewport per page, I assume it is declared in the launch() function. (as done by some of the Extjs examples) And since the layout (border, fit etc) is declared inside the Ext.create of the viewport, I believe you can't move it out of the Launch() function ?

Btw thanks again for the lengthy posts. Appreciate it !

[rakagod]

And i find that i could use
...
'grid1':{
edit: this.updateFields
}
...
in my Controller script. There was no need to refer to the itemID of the grid..

That is correct since you referred to the grid by its xtype which is just as good as per:
Ext.ComponentQuery
http://docs.sencha.com/ext-js/4-0/#!...ComponentQuery

Components can be retrieved by using their xtype with an optional . prefix

• component or .component
• gridpanel or .gridpanel

An itemId or id must be prefixed with a #

• #myContainer

I used an itemId since it appeared easier for me while testing out the the "Ext.Designer" software.
I use the trial version as a gui for my layouts. It does also have a leaning curve.

[rakagod]

My program works properly using this layout, but is it the correct way of doing things?
I'm using a slightly different approach in writing my app.js compared to yours.

launch: function()
{
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'south',
xtype: 'grid1',
height: 250,
minHeight: 250
},
...

And i find that i could use

'grid1':{
edit: this.updateFields
}
...

in my Controller script. There was no need to refer to the itemID of the grid.
.

Sorry, in my first reply I misunderstood your question.
The code you are showing is not following the MVC architecture, even if it does work.
The code under the "launch" function is a 'view", the V of the MVC.
It belongs in the view directory. i.e.
appName

app

view

as a definition just like in the proposed code.
If you want to use an "Ext.container.Viewport" then you can add it at the top of the view definition and then include the grid as an item.

Include the view in the "views array" of the controller and you won't have to launch it (Ext.create) since it will be done for you automatically.

Note:
I am not yet at ease with the "viewport" concept.
I know there is a "viewport" container and also that an application "viewport" is created by the "name" configuration item and possibly some other standard viewport.
I don't yet understand how they all interrelate.