add textfield on clicking a button in sproutcore

Question

How to add more textfields in a view on clicking a button in the same view in sproutcore?

I have a sliding pane with particular number of textfields. On clicking a button, I need to add more number of text field in the same view.

Or,

I should be able to select the number from a select button view and show those many number of textfield in the same view.

Answer 1

I would recommend using a SC.ListView for this purpose.

You should have a SC.ArrayController whose content is an array containing objects that represent each text field. This may be as simple as something like this:

MyApp.myController = SC.ArrayController.create({
  content: [
    SC.Object.create({ someProperty: "Text field value 1" }),
    SC.Object.create({ someProperty: "Text field value 2" }),
    SC.Object.create({ someProperty: "Text field value 3" })
  ]
});

Next, you'll create your SC.ListView and bind it's content to the controller, and create the exampleView whose content is bound to the someProperty property of the objects:

MyApp.MyView = SC.View.extend({
  childViews: 'scrollView addButtonView'.w(),

  scrollView: SC.ScrollView.extend({
    layout: { top: 0, left: 0, right: 0, bottom: 50 },

    contentView: SC.ListView.extend({
      contentBinding: 'MyApp.myController.arrangedObjects',

      rowHeight: 40,

      exampleView: SC.View.extend({
        childViews: 'textFieldView'.w(),

        textFieldView: SC.TextFieldView.extend({
          // Add a little margin so it looks nice
          layout: { left: 5, top: 5, right: 5, bottom: 5 },

          valueBinding: 'parentView.content.someProperty'
        })
      })
    })
  }),

  addButtonView: SC.ButtonView.extend({
    layout: { centerX: 0, bottom: 10, width: 125, height: 24 },

    title: "Add Text Field",

    // NOTE: The following really should be handled by a statechart
    // action; I have done it inline for simplicity.
    action: function() {
      MyApp.myController.pushObject(SC.Object.create({ value: "New Field" }));
    }
  })
});

Now, when you click the "Add Text Field" button, it will add a new object to the controller array which will automatically re-render the list view with the new object and hence, the new text field.

A couple of notes:

1. This uses a SC.ScrollView in conjunction with the SC.ListView, you will almost always want to do it this way.

2. Since we are using standard bindings (not SC.Binding.oneWay()), editing the text fields will automatically update the someProperty property in the objects in MyApp.myController and vice versa: if you update the value via some other means, the text field should automatically update as well.

3. This should not be used for a large list as using the childViews method of view layout can be slow. If you need performance, you should change the exampleView to a view that overrides the render() method and manually renders a text input and sets up the proper change events and bindings.

4. Lastly, I can't remember if the proper syntax for the text field's valueBinding is parentView.content.someProperty or .parentView.content.someProperty (notice the period at the beginning). If the first way doesn't work, try adding the . and see if that works.

Answer 2

Like Topher I'm assuming you're using SproutCore not Ember (formerly SC2).

If you need to add an arbitrary child view to an arbitrary location on your view, you want view.appendChild. In the button's action, you would do something like this:

this.get('parentView').appendChild(SC.View.create({ ... }))

If you go this route, you'll have to figure out the layout for the new view yourself. If you don't need to precisely control the layout, then go with Topher's solution - the ListView does the layout piece for you.