Results 1 to 5 of 5

Thread: Create reusable components with extjs 4

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Hyderabad, India
    Posts
    29

    Default Create reusable components with extjs 4

    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

  2. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Hyderabad, India
    Posts
    29

    Default

    Thanks friend for you answer,

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

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Answers
    130

    Default

    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
    Best regards
    Tobias Uhlig

  5. #5
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Answers
    3

    Default

    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)
    word

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •