Create reusable components with extjs 4

[nani1216]

Hi,
How can i create a reusable extjs components ( panels, fromPanels, data stores ) with out using extjs 4 MVC. If its not possible how to do it with MVC,

My application will have 3 tabpanels
Quizzes - Exerxises - Exams

Each tab will load a view file from server, which includes a grid panel and question form.
Grid and question panel will be same for each 3 tabs.

i write the js code for grid and question from in one js file and included that in quiz-view, exercise-view and exam-view
Doing so will displays the grid and form correctly for the first time. if i go to the second tab, grid and form are not rendered properly (form missing some elements). I noticed that this is because of the id properties of the form elements.

how to implement this kind layout.

aBlQ8.jpg

[friend]

MVC is not a requirement when using ExtJs v4.x. However, if you don't use MVC, then it's up to you to manage class namespaces, instantiation and life-cycle of your various classes/visual components, event handling, etc.

Whatever you do, avoid the use of hard coded IDs on your components. Instead, use Ext.ComponentQuery.query('css3 style selector here') and/or component methods down/up/child to get references to your application objects.

If I understand you correctly, it sounds like you're embedding the same java script file in three separate pages. It is probably a better idea to write a generic, configurable component which represents your grid/form. You would then use a single page to include the generic component code and load your application. In the launcher page, you would add an Ext.onReady(function() { // init code here}) which creates new instances of the generic component (passing URLs and such during construction) and loads them into appropriate tab panels.

[nani1216]

Thanks friend for you answer,

Can you provide me info / any link for best practices of extjs 4, dos and donts.
Thank you.

[tobiu]

for dos and donts, take a look at the api docs, there are several guides.

for reusable components, it is recommended to not just create an instance of a control, but to use Ext.define() to extend it and create a custom class. you can then instanciate this class multiple times with different configs or do some custom logic inside of the initComponent method.

best regards

[castitas]

Be aware that when creating reusable components that appear on the same page, the component selectors will get all the objects that fit it. So if your reusable component is a panel with a grid and form, Ext.ComponentQuery.query('reusable grid') will get the grid from every reusable comp. You can prevent this by getting the parent component and doing parent.query('grid') from it. (Ext.ComponentQuery.query('reusable grid', parent) will also work)