PDA

View Full Version : Passing input between views



Pieterbellon
14 Mar 2014, 2:41 AM
Hi, I'm a beginner when it comes to Ext JS and would like some more understanding.

Currently my problem would be to pass the input from a view to another view.

I have 2 views as shown below:

View1:

Ext.define("App.view.Form1", { extend: "Ext.form.Panel",
xtype: "form1",
config: {
title: "Form1",
items: [ {
xtype: "fieldset",
title: "fieldsetform",
items: [ {
xtype: "textfield",
name: "input1",
id: "input1",
label: "INPUT1"
} ]
}, {
xtype: "button",
text: "submit",
ui: "confirm",
handler: function() {
// Var input = Ext.getCmp("input1").getValue()
Ext.Viewport.setActiveItem(Ext.create("App.view.View2"));
}
} ]
}
});

View 2:

Ext.define("App.view.View2", { extend: "Ext.Panel",
xtype: "view2",
config: {
title: "View2",
items: [ {
xtype: "label",
name: "input1",
id: "input1result",
html: "test"
} ],
listeners: {
painted: function() {
//Through this function it should get the input from last view and put it as text/html for the "input1result" label.
}
}
}
});

Note: Just edited out the parts that would have been redundant to post. Like additional textfields and the likes.
The paint is for testing purpose.

No controller used for this because I just want some insight in how to do it this way.
So simple: I enter text in textfield --> Submit with button. --> Opens next view and on painted it should put the text into the label.

Additional:

In this case it's a non form label, does it only use "html:" then? I saw that other tags that have labels could use "text:" (or saw something like that somewhere). With labels I have to do getHtml; getValue didn't work.

Any more tips apart from the first app creation tutorial?


Thanks in advance.

~Pieter

Farish
14 Mar 2014, 3:18 AM
There are a couple of ways to do this.

i) Ext.create() allows you to pass arguments to the class's constructor:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create
in this, you could send the value of your textfield etc.

ii) you can assign an id to the field and you Ext.getCmp('idTag').getValue() to get its value. This is usually not recommended because the id must be unique throughout your app and duplication can cause unexpected effects but I use it sometimes :) Also, the component must exist (it shouldnt be destroyed before you get the value).

iii) you can use component query to access the textfield's value. I havent used it a lot but it could be something like this:


this.up('viewport').down('form1').down('textfield');

this uses xtypes but if there is more than one textfield in form1, then you have to be able to distinguish them. you can assign an itemId to your textfield (doesnt have to be unique app-wide) and use a query like:


this.up('viewport').down('form1').down('#itemIdOfTextfield');

this query would go in the paint function. take a look at documentation for more details on component query.

mdnaveed42
14 Mar 2014, 3:23 AM
Farish +1 for you...

You typed fast than me and i was about to answer exactly the same.

you rock \m/

Pieterbellon
14 Mar 2014, 3:34 AM
Farish

Thanks for your answer. This helped me out a lot.

As for the id use, seems I should be cautious with this :). Already saw my browser give warnings before!

~Pieter

Farish
14 Mar 2014, 3:37 AM
@mdnaveed42: thanks for the +1 :)

yes you can use ids but you just have to be careful not to reuse them. if using ids, then make them such that there is no chance of reusing e.g. combination of form/panel name and purpose of the field.

mdnaveed42
14 Mar 2014, 4:45 AM
I prefer using "itemId"
http://localhost:8080/ext-4.2.1-gpl/ext-4.2.1.883/docs/index.html#!/api/Ext.AbstractComponent-cfg-itemId