Dynamically add and remove components to a window using a remote js.

[nikhilkrishnan]

Hi,

I have created a Window in which there is a grid and tbar. I have added a menu to the tbar, and on selecting one of the menu items i want to remove the current grid and load a new grid from a file which is stored at the servers side. How can i do this.

I have tried using 'Loader' with the window. I was able to remove the child component [grid] using 'remove', but how can i access the file at the server side process it and add it as child to the window?

Nikhil

[skirtle]

First question, why is the JS remote? Is there a good reason why you aren't loading the JS file when the page loads?

If you do want to defer loading then the loader is not a bad way to do it. There's a blog post about using the loader:

http://www.sencha.com/blog/using-ext-loader-for-your-application/

If you're using the loader then you can use Ext.require() to explicitly load your class, though Ext.create() will do this implicitly if required.

It is important to note that JavaScript does not have the file/class link that exists in other languages such as Java. In JavaScript files are largely arbitrary divisions of the code that have little significance to the JavaScript engine. However, though JavaScript itself has little regard for file divisions the ExtJS loader relies on them - it expects you to put each class in a file with a name matching the class name.