1. #1
    Sencha User
    Join Date
    Mar 2014
    Posts
    11
    Vote Rating
    1
    Answers
    2
    Pieterbellon is on a distinguished road

      0  

    Default Answered: Passing input between views

    Answered: Passing input between views


    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:
    Code:
    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:
    Code:
    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
    Last edited by Pieterbellon; 14 Mar 2014 at 3:22 AM. Reason: Added line for clarification

  2. 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/#...-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:

    Code:
    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:

    Code:
    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.

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      2  

    Default


    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/#...-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:

    Code:
    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:

    Code:
    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.

  4. #3
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Vote Rating
    21
    Answers
    15
    mdnaveed42 will become famous soon enough mdnaveed42 will become famous soon enough

      0  

    Default


    Farish +1 for you...

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

    you rock \m/

  5. #4
    Sencha User
    Join Date
    Mar 2014
    Posts
    11
    Vote Rating
    1
    Answers
    2
    Pieterbellon is on a distinguished road

      0  

    Default


    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

  6. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      1  

    Default


    @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.

  7. #6
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Vote Rating
    21
    Answers
    15
    mdnaveed42 will become famous soon enough mdnaveed42 will become famous soon enough

      0  

Thread Participants: 2

Tags for this Thread