call view on button click from controller

[pricey]

Hello all, I am newbie to Ext JS, unfortunately my foray into Ext JS had to be into the recent MVC - Though I am not at all new to MVC, I find it hard to grasp Ext JS's own way of MVC implementation! (as others in the forum are complaining... but that is a discussion for another time)

Anyway, after going through all the very scarce MVC examples and unclear documentation .... wasting so many man hours, still I am not clear how to go about things here.
My first example is simple and as starting point to using ExtJS further along, but it is taking such a strain to code it in 4!

I have 2 views, both forms. First one has a button which when clicked must open the second view. I put the following code in controller, but nothing seems to be working, Can someone please help me how to do add view on button click in new MVC way? or can't you add views liek that from controller? Am i missign something here?
init: function(){
this.control({
'view1 button[action=toView2]': {
click: this.toView2
});
},
/*Did not work*/
toView2: function(button) {
var toView2= this.getView2(). show();

/*Did not work either. First view gets removed, but second view is not loaded*/
var form1 = this.getView1();
form1.removeAll();
var form2 = Ext.create('EX.view.Form2');
form1.add(form2);

[slemmon]

You might make a container with a card layout and add form 1 and 2 as the items of that container. Then with the button click switch from card 1 to card 2. You might check out the Example Usage on the following page for an example:
http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card

T (http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card)he implementation will be about the same whether you have the controller manage the event in your MVC app or if if you set it up the old fashioned way with the handler set up in the button config.

Hope that helps!

[raz0r1]

All in all it not quite clewar what you exactly want to do.

If you want a "step-by-step" from, the prvious post is what you want.

If you want to have e.g. one form (form1) on the right half of the page and when the button within form1 is clicked, on the left half will be a second form be opened you should use something like the following:



Ext.create('App.Viewport', {
items: [{
xtype: 'form',
itemId: 'firstForm',
button [{ text: 'next'}]
},{
xtype: 'form',
itemId: 'secondForm',
autoShow: false
}]});

In the controller you can add a listener to the button when you use following query:

this.control({
'viewport button[text="next"]' :{
click: function(button) { button.up('viewport').down('form[itemId="secondForm"]').show(); }
});


In the click event you take the button, go up to the viewport and then go down again search for the form that has the itemId == "secondForm".

In general this is the way how you adress components etc out of an event. The other way is usung Ext.ComponentQuery.query(); to adress other components. see: http://docs.sencha.com/ext-js/4-0/#/api/Ext.ComponentQuery

H (http://docs.sencha.com/ext-js/4-0/#/api/Ext.ComponentQuery)ope this helps a little bit.

btw: Extjs is one of the best documented frameworks i have ever worked with ;) And when you know how the examples work you can nearly write everything on your own :) but it takes some time to get into it. (but you are right, this is not the time to discuss ;)

[vdan]

You could do something like:



this.control({
'view1 button[action=toView2]': {
click: function() {
var form = Ext.ComponentQuery.query('form2')[0] || Ext.create('form2');
}
}
});

assuming you have defined an alias 'widget.form2' for your second form.

The problem with your attempt to do "var toView2= this.getView2(). show(); " is that
1- "this" does not refer to the controller in this scope.
2- getView does not create a view. It refers to the class.