Update the changes made in controller to the view

Question

How to update the changes made in the controller to the view?

View

 Ext.define('SomeClassName',
 extends: 'Ext.container.Container',
 alias: 'widget.somewidget'
 /* other content here */

Controller

 requires: ['SomeClassName'],
 init: function(){
     var someVar = Ext.widget('somewidget');
     Ext.apply(someVar,{html: 'hello'});
 }

Eventhough, In the above controller, I am changing the html of the variable, the view is not changing. Am I doing something wrong here?

If this is not possible, then how to do this?

You're defining an instance of your widget, but you're not adding it to your viewport or any other container.. — Rob, Mar 19 '13 at 08:43
@Rob That's what exactly I thought.(I thought it will call inbuilt action in extjs). Anyway to update that changed variable to the view now? — Mr_Green, Mar 19 '13 at 08:44
@Rob this will add to the viewport. (If I am right). The variable is nested in to many deep containers) and even the above code will not remove the previous existing view, I think. — Mr_Green, Mar 19 '13 at 08:47
No thats right, you will have to call `Ext.Viewport.remove(yourOtherViewInstance);` for that. But trust me, this isn't the way to go. Use like a tabbar or navigationview in your app. I have really bad experience adding/removing stuff directly to the viewport.. — Rob, Mar 19 '13 at 08:49
@Rob Before this, I tried `var someVar = Ext.getView('SomeClassName')` . resulting `undefined`. — Mr_Green, Mar 19 '13 at 08:51

score 1 · Answer 1 · answered Mar 19 '13 at 13:43

1

What about that (doc)?

Ext.widget('somewidget', { html: 'hello' })

answered Mar 19 '13 at 13:43

no, tried not working. Does this should work? I mean, will this code update the "View" ? – Mr_Green Mar 19 '13 at 13:44
In a sense yes, but it is more accurate to say that it is an initialization. – Mar 19 '13 at 13:48
Yes, I think this just creates a instance of the widget. but does not update the view to which it is given as `alias`. – Mr_Green Mar 19 '13 at 13:49
It works for me : [jsFiddle here](http://jsfiddle.net/EE9PZ/). I guess you have forgotten something, maybe `renderTo`? – Mar 19 '13 at 13:52
hmm yes working fine in fiddle. Not sure why it hasn't worked for me in my project. may be because of MVC structure(I don't think so). – Mr_Green Mar 19 '13 at 13:54
+1 I will try this again may be in future. Right now, I changed the complete code based on `itemId`'s and ComponentQuery's. :) – Mr_Green Mar 19 '13 at 14:00

score 1 · Accepted Answer · answered Mar 19 '13 at 18:07

First, you shouldn't use Ext.container.Container if you just want to render custom HTML. Ext.Component will suffice for this. Second, you can use templates:

Ext.define('MyView', {
    extend: 'Ext.Component',
    alias: 'widget.myview',
    tpl: [
        '<div>Simon says: {command}</div>'
    ]
});

Ext.define('MyController', {
    extend: 'Ext.app.Controller',
    requires: ['MyView'],
    init: function() {
        var cmp = Ext.widget('myview');
        cmp.update({
            command: 'jump!'
        });
    }
});

Note than tpl won't apply the first time component is rendered, you have to call update for that. To have the template rendered at initialization, set data property with default template values:

Ext.define('MyView', {
    extend: 'Ext.Component',
    alias: 'widget.myview',
    tpl: [
        '<div>Simon says: {command}</div>'
    ],
    data: {
        command: 'do nothing.'
    }
});

+1 for this info. I will try this and let you know :). Thanks. — Mr_Green, Mar 20 '13 at 04:02

Update the changes made in controller to the view

2 Answers2