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

[rakagod]

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.!

"If so then there's really no need to do it in app.js ? Its just writing extra code for no reason."
You said declaring the "models array" doesn't work in app.js, so yes it would be useless code.
You said it does work when you declare the "models array" in the controller so that should be sufficient; even if it did work in app.js because as you say it would become extra code for no reason.

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 ?

The MVC Architecture documentation itself shows that approach.

[rakagod]

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.

Yes, I would appreciate that.
Thank you very much.

[danielleng]

Spent some time refactoring my code. It seems "proper" now. Also customized the viewport and added "reset" and "refresh" button functionalities. Note that the Navigation panel and Test Form is for cosmetic purposes.

Oh and i apologize about the innaccuracy of my previous post... i declared the controllers, models and stores array in app.js and it didn't throw errors now. Strange...

[rakagod]

... i declared the controllers, models and stores array in app.js and it didn't throw errors now. Strange...

I think that is because you have made a version 3 app rather than a version 4 MVC app.
I say this because in app.js you wrap everything in an "Ext.onReady" which is a version 3 approach.

If you remove it and wrap everything in the "Ext.application" which is the version 4 approach then your problems reappear and we are back to the comment in my original post that "direct does not play nicely with version 4 MVC" and that is why we have to struggle so hard with the store.


.

[sachintaware]

@danielleng

Hello
I am trying to implement something similar with JAVA backend.
What backend have you used?If possible please upload the code,for reference.
The problem I am facing is listed below.
I get the right json format from database using java.

Its like this.

{"device":[{"id":1,"uname":"Sachin","fname":"Sachin","lname":"Taware","emailid":"sachi@gmail.com","statename":"MH","cityname":"Pune","countryname":"India"},{"id":2,"uname":"Rahul","fname":"Rahul","lname":"Dravid","emailid":"rdravid@gmail.com","statename":"KA","cityname":"Bangalore","countryname":"India"},{"id":3,"uname":"MS","fname":"MS","lname":"Dhoni","emailid":"ms@gmail.com","statename":"JH","cityname":"Ranchi","countryname":"India"},{"id":4,"uname":"viru","fname":"Virender","lname":"Sehwag","emailid":"viru123@gmail.com","statename":"DL","cityname":"Delhi","countryname":"India"}]

I have my script in an Html file.
But,now how can I pass it to the store?
The problem I think is in the proxy and reader section(I have highlighted it).Can I pass the URL of the class file of the compiled servlet ??If not any how to pass the json to the store?
Firebug still shows me the same error of invalid json.

 <script type="text/javascript">
    
    Ext.onReady(function() {               
       Ext.define('Company', {
           extend: 'Ext.data.Model',
           fields: [
                    {name:'uname',type: 'string'},
                    {name:'fname',type: 'string'},
                    {name:'lname',type: 'string'},
                    {name:'emailid',type: 'string'},
                    {name:'statename',type: 'string'},
                    {name:'cityname',type: 'string'},
                    {name:'country',type: 'string'}]
       });

       var store_company = new Ext.data.Store({
          model: 'Company',
          proxy: {
              type: 'ajax',
              url: 'register.class',
              
              reader: {
                  type: 'json',
                  root:'device'
              },
              
          }
          
       });                             
        
        
        var grid_company = Ext.create('Ext.grid.Panel', {
                                      
            store: store_company,
                
                columns:[
                     
                {
                    text     : 'User Name',
                    width    : 120,
                    sortable : true,
                    
                    dataIndex: 'uname'
                },
                {
                    text     : 'Firstname',
                    width    : 120,
                    sortable : true,
                    dataIndex: 'fname'
                },
                {
                    text     : 'Lastname',
                    width    : 110, 
                    sortable : true,
                    dataIndex: 'lname'
                },
                {
                    text     : 'Email',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'emailid'
                },
                {
                    text     : 'State',
                    width    : 100, 
                    sortable : true,
                    dataIndex: 'statename'
                },
                {
                    text     : 'City',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'cityname'
                },
                {
                    text     : 'Country',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'countryname'
                }
            ],
             bbar: Ext.create('Ext.PagingToolbar', {
        store: store_company,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    }),    
            height: 210,
            width: 902,
            title: 'Company List',
            renderTo: 'grid-company',
            viewConfig: {
                        stripeRows: true
                }        
        });
        store_company.load();
    });
    </script>

Regrds
Sachin

[rakagod]

My original post was only to provide an updated version of existing code given in the documentation.
I am only a beginner and I do not have the knowledge you seek.

I can only point you to:
http://docs.sencha.com/ext-js/4-0/#!/guide/data
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

There is also the sample code in the download of the framework.
Hope this helps.

[sachintaware]

@rakagod
Thank you for the references.Will go through them.
I found the solution at http://www.sencha.com/forum/showthre...nd-Mysql/page2

Regards
Sachin

[KostasP]

The update functionality doesn't work? Add neither, given it uses the update functionality...

Error message "Cannot call method save of undefind"

Any ideas why?

[KostasP]

well it looks like

e.record.save()

works fine for me though u had it commented out and replaced with

editor.record.save()

which gives me the error...