View Full Version : System migration

12 Nov 2011, 6:39 PM
Hello guys, currently i am starting to work with extjs 4 and i'm needing some help to migrate an system that i had build on jQuery, with several plugins. On this system, i have an top menu, which redirect the user to the desired page when an item is clicked... I did some tutorials with extjs 4 , and i saw that on the start you define an js called app.js which has the default controller of your system.
Until here, all fine!

But i need to put an menu on the top of the system, i will try to find an way to do it. The reason of the thead is that i don't know how to make new loads of new table grids on the system, before user select an item on the menu. On the old system, when user click on an menu, i just need to reload all the page, with the desired HTML, but i don't know the best way to make it on extjs.

I was wondering if i would destroy all the panels, them load a new model, a new controller with some ext function?
Or maybe it isn't so hard, i just need to reload the HTML with the new controller that i wanna to load (and the defined models, views and etc... I would be realy happy to know that this is the correct option... :D)
And if it is, HOW can i made it? I didn't saw any example working with many grids on an system (on diferent pages).

I whish that everyone could understand it... Also,i tried to search on the forum and on the web about this, but i didn't found anything, if someone has some links or maybe, could explain me how to do it, i will bre really glad!

Thanks to everyone!

13 Nov 2011, 6:28 AM
To do a menu look at this example: http://docs.sencha.com/ext-js/4-0/#!/example/menu/menus.html

To add a grid to another panel, say you have a Panel like so:

var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody,
width : 400,
height : 400,
layout : 'fit',
title : 'Test Panel'

You can then add a grid like so:

panel.removeAll(); //removes all children of panel
xtype : 'gridpanel',
column : [....],
store : someStore

To create a grid, we have lots and lots of examples 25 examples) here: http://docs.sencha.com/ext-js/4-0/#!/example

13 Nov 2011, 11:19 AM
So, every time the user click on an item on the top menu, i jsut need to delete all the children elements, them load all new views, models, etc?

But, how can i work with the MCV structure like this way? Controllers should load all the views (grids on the panel), how i would load the controller?

13 Nov 2011, 6:11 PM
We don't have any example on sencha docs teaching how to work with multiple controllers... Because of it, it is a quite hard to understand how to work with the new MVC structure... Searching on the web, and reading many theads, i finally had found what i was looking for!


(http://www.sencha.com/forum/showthread.php?132795-Dynamically-loading-MVC-controller&p=605522&viewfull=1#post605522)On this Thead, we have an example to download where Dynamic loader of controllers are enabled (ext has it with this.getController function), and it is what i was looking for! With it, i can handdle page requisitions by the user needs...