1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    41
    Vote Rating
    1
    rakagod is on a distinguished road

      1  

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

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


    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.
    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by rakagod View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    41
    Vote Rating
    1
    rakagod is on a distinguished road

      0  

    Default Tried it

    Tried it


    Thank you for your help.

    Quote Originally Posted by mitchellsimoens View Post
    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.

    Quote Originally Posted by mitchellsimoens View Post
    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.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    41
    Vote Rating
    1
    rakagod is on a distinguished road

      0  

    Default


    Quote Originally Posted by danielleng View Post
    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.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    41
    Vote Rating
    1
    rakagod is on a distinguished road

      0  

    Default


    Quote Originally Posted by danielleng View Post
    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.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    41
    Vote Rating
    1
    rakagod is on a distinguished road

      0  

    Default


    Quote Originally Posted by danielleng View Post
    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.

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    Quote Originally Posted by rakagod View Post
    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
    Code:
    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 !

  9. #9
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    Oh and btw I implemented a form which links to the grid/database and allows the user to add their own data. If you're interested in the code I could upload it here.

    Screenie1.jpg
    Cheers,
    Daniel

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    Ahh, nvm. My question was answered here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Application