1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    anandhi is on a distinguished road

      0  

    Default Unanswered: How to pass values from one view of ext js to another view of extjs?

    Unanswered: How to pass values from one view of ext js to another view of extjs?


    How to pass values from one view of ext js to another view of extjs?

    Hi,i want to know to pass values of form from one view to another view where the same values user enter in first view.

    This my html code,

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Ext.form.Basic Example</title>
    <link rel="stylesheet" href="ext-all.css"/>
    <link rel="stylesheet" href="ext-standard.css"/>
    <script src="ext-all-debug.js"></script>

    <script src="app.js"></script>

    </head>
    <body>

    </body>
    </html>

    app.js


    Ext.onReady(function () {
    Ext.create('Ext.Button', {
    id:'button',
    bodyPadding: 10,
    pack:'center',
    align:'center',
    text: 'Register',


    listeners: {
    click: function () {
    var paneltab = Ext.create('app2');
    Ext.getCmp('button').destroy();

    Ext.Viewport.add(paneltab);
    } // click
    }, // listeners
    renderTo: Ext.getBody()
    }); // create()
    }); // onReady()

    this is app2.

    Ext.define('app2', {
    extend: 'Ext.form.Panel',

    title: 'Registration Form',
    id:'loginform',
    renderTo: Ext.getBody(),
    bodyPadding: 20,
    width: 350,


    // Any configuration items here will be automatically passed along to
    // the Ext.form.Basic instance when it gets created.
    // The form will submit an AJAX request to this URL when submitted
    url:'application',
    method:'POST',

    defaultType: 'textfield',
    items: [{
    fieldLabel: 'First Name',
    name: 'first',
    id:'first',

    allowBlank: false
    }, {
    fieldLabel: 'Password',
    name: 'pass',
    inputType: 'password',
    allowBlank: false
    },

    {
    fieldLabel: 'Email',
    name: 'email',
    vtype:'email',
    allowBlank: false,

    }, {
    xtype: 'datefield',
    fieldLabel: 'Date of Birth',
    name: 'birthDate',
    allowBlank: false
    },{
    xtype: 'numberfield',
    name: 'numberfield1',
    fieldLabel: 'age',
    value: 5,
    minValue: 1,
    maxValue: 100
    },
    {
    xtype: 'textareafield',
    name: 'textarea1',
    fieldLabel: 'Location',

    }
    ],

    buttons: [{
    text: 'Reset',
    handler: function () {
    this.up('form').getForm().reset();
    }
    },{
    text: 'Login',

    handler: function () {
    // The getForm() method returns the Ext.form.Basic instance:
    var form = this.up('form').getForm();
    if (form.isValid()) {
    // Submit the Ajax request and handle the response
    form.submit({

    success: function (form, action) {

    response = Ext.decode(form.responseText);
    console.log(action.result.action1);
    Ext.Msg.alert('Success' , action.result.action1,
    function(btn,text)
    {
    //Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
    //Ext.app2.remove(Ext.app2.getActiveItem(), true);
    if (btn=='ok')
    {


    var paneltab = Ext.create('app3');
    Ext.getCmp('loginform').destroy();
    Ext.Viewport.add(paneltab);


    }
    }
    );


    },






    /*Ext.create('Ext.container.Viewport', {

    items: [
    {
    xtype: 'screenb'
    }
    ]
    });*/
    /* Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'User Form',
    height: 100,
    width: 515,
    defaults: {
    xtype: 'textfield',
    labelAlign: 'top',
    padding: 10
    },
    layout: {
    type: 'hbox'
    },
    items: [{
    fieldLabel: 'First Name',
    name: 'firstName'
    }, {
    fieldLabel: 'Last Name',
    name: 'lastName'
    }, {
    xtype: 'datefield',
    fieldLabel: 'Date of Birth',
    name: 'birthDate'
    }]
    });*/



    failure: function (form, action) {
    Ext.Msg.alert('Failed', action.result.value);
    }
    });
    }
    }
    }]

    });

    from this i am calling server application.java

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.setContentType("text/html");

    // Actual logic goes here.
    PrintWriter out = response.getWriter();
    String action=request.getParameter("first");
    String action1=request.getParameter("pass");
    String action2=request.getParameter("email");




    if(action.equalsIgnoreCase("tcs")&&(action1.equalsIgnoreCase("company"))&&(action2.equalsIgnoreCase("anu@gmail.com")))
    {
    System.out.println("hello"+"\t"+action+"\t"+action1);
    response.getWriter().println("{success:true,action1:'Welcome to Tata consultancy services' }");

    }



    else{
    System.out.println(action);
    System.out.println(action1);
    response.getWriter().println("{falied:true, value:'error,Login Failed'}");}




    }

    }

    after server response it will call app3.js




    Ext.define('app3', {
    extend: 'Ext.form.Panel',
    title: 'Login',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'User Name',
    allowBlank: false, // requires a non-empty value

    }, {
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Password',
    inputType: 'password',

    // requires value to be a valid email address format
    }]

    });

    i want to know how to pass values of firstname and password from app2.js to app3.js

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,996
    Answers
    664
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Perhaps a singleton class that can be used to set/get variables?

    Code:
    // Utils.js
    Ext.define('MYAPP.Utils', {
        singleton : true,
    
        // var, functions
    
    });    
    
    // app.js
    requires: [
        'MYAPP.Utils'
    ],
    You can set/get as needed in your actions.

    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    anandhi is on a distinguished road

      0  

    Default


    Thank you.but i cant understand how to set/get variables.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,996
    Answers
    664
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You just access the value as:

    Code:
    MYAPP.Utils.myValue // assign inside of utils
    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default Use Config to get and Set your values.

    Use Config to get and Set your values.


    Check this: http://docs.sencha.com/ext-js/4-1/#!...ass-cfg-config and http://docs.sencha.com/ext-js/4-1/#!/guide/class_system

    Code:
    
    Ext.define('SmartPhone', {
        config: {
            hasTouchScreen: false,
            operatingSystem: 'Other',
            price: 500
        },
        constructor: function (cfg) {
            this.initConfig(cfg);
        }
    });
    var iPhone = new SmartPhone({
        hasTouchScreen: true,
        operatingSystem: 'iOS'
    });
    iPhone.getPrice(); // 500; iPhone.getOperatingSystem(); // 'iOS' iPhone.getHasTouchScreen(); // true;
    Code:
    var myWindow = Ext.create('My.own.Window', {
        title: 'Hello World',
        bottomBar: {
            height: 60
        }
    });
    alert(myWindow.getTitle());
    myWindow.setTitle('Something New');
    myWindow.setBottomBar({
        height: 100
    });

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,996
    Answers
    664
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Another advantage of using config is your setters/getters are already created for you:
    http://www.sencha.com/learn/sencha-class-system

    Scott.

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    anandhi is on a distinguished road

      0  

    Default


    i want to know how pass values to next page what user enters.i tried using class its not working for me.it s working for same view .i need to pass values from one view to another

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default Next page or next view?

    Next page or next view?


    Next Page or Next View? Can you provide the sample code which you tried?

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    anandhi is on a distinguished road

      0  

    Default


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Ext.form.Basic Example</title>
    <link rel="stylesheet" href="ext-all.css"/>
    <link rel="stylesheet" href="ext-standard.css"/>
    <script src="ext-all-debug.js"></script>

    <script src="app.js"></script>

    </head>
    <body>

    </body>
    </html>

    app.js


    Ext.onReady(function () {
    Ext.create('Ext.Button', {
    id:'button',
    bodyPadding: 10,
    pack:'center',
    align:'center',
    text: 'Register',


    listeners: {
    click: function () {
    var paneltab = Ext.create('app2');
    Ext.getCmp('button').destroy();

    Ext.Viewport.add(paneltab);
    } // click
    }, // listeners
    renderTo: Ext.getBody()
    }); // create()
    }); // onReady()

    this is app2.

    Ext.define('app2', {
    extend: 'Ext.form.Panel',

    title: 'Registration Form',
    id:'loginform',
    renderTo: Ext.getBody(),
    bodyPadding: 20,
    width: 350,


    // Any configuration items here will be automatically passed along to
    // the Ext.form.Basic instance when it gets created.
    // The form will submit an AJAX request to this URL when submitted
    url:'application',
    method:'POST',

    defaultType: 'textfield',
    items: [{
    fieldLabel: 'First Name',
    name: 'first',
    id:'first',

    allowBlank: false
    }, {
    fieldLabel: 'Password',
    name: 'pass',
    inputType: 'password',
    allowBlank: false
    },

    {
    fieldLabel: 'Email',
    name: 'email',
    vtype:'email',
    allowBlank: false,

    }, {
    xtype: 'datefield',
    fieldLabel: 'Date of Birth',
    name: 'birthDate',
    allowBlank: false
    },{
    xtype: 'numberfield',
    name: 'numberfield1',
    fieldLabel: 'age',
    value: 5,
    minValue: 1,
    maxValue: 100
    },
    {
    xtype: 'textareafield',
    name: 'textarea1',
    fieldLabel: 'Location',

    }
    ],

    buttons: [{
    text: 'Reset',
    handler: function () {
    this.up('form').getForm().reset();
    }
    },{
    text: 'Login',

    handler: function () {
    // The getForm() method returns the Ext.form.Basic instance:
    var form = this.up('form').getForm();
    if (form.isValid()) {
    // Submit the Ajax request and handle the response
    form.submit({

    success: function (form, action) {

    response = Ext.decode(form.responseText);
    console.log(action.result.action1);
    Ext.Msg.alert('Success' , action.result.action1,
    function(btn,text)
    {
    //Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
    //Ext.app2.remove(Ext.app2.getActiveItem(), true);
    if (btn=='ok')
    {


    var paneltab = Ext.create('app3');
    Ext.getCmp('loginform').destroy();
    Ext.Viewport.add(paneltab);


    }
    }
    );


    },






    /*Ext.create('Ext.container.Viewport', {

    items: [
    {
    xtype: 'screenb'
    }
    ]
    });*/
    /* Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'User Form',
    height: 100,
    width: 515,
    defaults: {
    xtype: 'textfield',
    labelAlign: 'top',
    padding: 10
    },
    layout: {
    type: 'hbox'
    },
    items: [{
    fieldLabel: 'First Name',
    name: 'firstName'
    }, {
    fieldLabel: 'Last Name',
    name: 'lastName'
    }, {
    xtype: 'datefield',
    fieldLabel: 'Date of Birth',
    name: 'birthDate'
    }]
    });*/



    failure: function (form, action) {
    Ext.Msg.alert('Failed', action.result.value);
    }
    });
    }
    }
    }]

    });

    from this i am calling server application.java

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.setContentType("text/html");

    // Actual logic goes here.
    PrintWriter out = response.getWriter();
    String action=request.getParameter("first");
    String action1=request.getParameter("pass");
    String action2=request.getParameter("email");




    if(action.equalsIgnoreCase("tcs")&&(action1.equalsIgnoreCase("company"))&&(action2.equalsIgnoreCase("anu@gmail.com")))
    {
    System.out.println("hello"+"\t"+action+"\t"+action1);
    response.getWriter().println("{success:true,action1:'Welcome to Tata consultancy services' }");

    }



    else{
    System.out.println(action);
    System.out.println(action1);
    response.getWriter().println("{falied:true, value:'error,Login Failed'}");}




    }

    }

    after server response it will call app3.js




    Ext.define('app3', {
    extend: 'Ext.form.Panel',
    title: 'Login',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'User Name',
    allowBlank: false, // requires a non-empty value

    }, {
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Password',
    inputType: 'password',

    // requires value to be a valid email address format
    }]

    });

    i want to know how to pass values of firstname and password from app2.js to app3.js

  10. #10
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    anandhi is on a distinguished road

      0  

    Default


    i have already posted the sample code which i tried...
    i want to pass values to next view only

Thread Participants: 2

Tags for this Thread