1. #1
    Sencha User
    Join Date
    Dec 2007
    Location
    Grand Rapids, MI
    Posts
    13
    Vote Rating
    0
    pjs is on a distinguished road

      0  

    Default Answered: Reusable Form Layout

    Answered: Reusable Form Layout


    Hi, I would like to know the best practice for defining a form layout that I can reuse in different views but with different field names. So I would have a base layout such as:

    Code:
    Ext.define('App.view.CommonForm', {
      extend: 'Ext.form.Panel'
      ,xtype: 'commonform'
      ,config: {
        title: title
        ,defaults: {
          xtype: 'textfield'
          ,layout: 'hbox'
        }
        ,items: [
          {
            label: label1
            ,name: name1
            ,flex: 2
          }
          ,{
            label: label2
            ,name: name2
            ,flex: 1
          }
        ]
      }
    });
    Imagine, however, that the layout is actually something more complicated than above.

    And then in some view, I could (pseudo code):
    Code:
    ...
    items: [
      {
        xtype: 'commonform'
        ,title: 'Baz'
        ,fields: [
          {label1: 'Foo', name1: 'foo'}
          ,{label2: 'Bar', name2: 'bar'}
        ]
      }
    ]
    This example is rather rigid with a fixed number of fields, but hopefully you get the idea. I've looked at some of the examples like "Touch Tweets", but I'm not sure that's what I'm looking for. Ideally I'd like to be able to define a component template that uses components, similar to how XTemplate uses html.

    Thanks,
    Paul

  2. In your App.view.CommonForm class you can use the applyItems to add the fields array to the items array and return that array.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Answers
    3549
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In your App.view.CommonForm class you can use the applyItems to add the fields array to the items array and return that array.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2007
    Location
    Grand Rapids, MI
    Posts
    13
    Vote Rating
    0
    pjs is on a distinguished road

      0  

    Default


    Thanks!

Thread Participants: 1