Make a labelview editable on click of a button - Sproutcore

Question

I'm very new to sproutcore. Although I know about the SC.InlineEditable mixin and isEditable field, the problem is when I click on the button to make a labelView editable. The label remains the same and I have to double-click on the label to type in text.

What I want is when I click on the edit button , the label should turn into a text field and should become the first responder, i.e the cursor should blink on the textfied.

I couldn't find any decent documentation(sproutcore didn't help much) or tutorial to do this. Links to such references would also be very helpful.

Answer 1

According to the showcase, you should be able to accomplish this as follows:

SC.LabelView.extend({
  classNames: ['my-label-view'],
  isEditable: true,
  layout: { width: 300, height: 16, centerX: 0, centerY: 0 },
  value: 'Double-click this label to edit inline.'
})

If this doesn't work, can you tell us what version of SC you are using, and what browser/version? It could be a potential bug.

Answer 2

To me it feels like enabling the labels is a different state in your application. In this case you would best tie the action of the button to the statechart. So, you first create a controller with an isEditing property, which is false (by default).

myApp.myController = SC.Controller.create({
  isEditing: false;
});

Now you create a function in the current state, which is called by the action on the button. This will result in going to an EDITING state, which sets the isEditing property to true in the enterState and to false in the exitState.

I don't know by heart how you can bind the editing state of the label view to this isEditing property, but assuming this is possible, you can in this way control the editing state of all the fields at the same time, and you will know for sure that all the fields will also be returned to normal when the editing is done.