Hybrid View

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

      0  

    Default 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 - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    This is not the Ext JS forum - which version are you using so I can move this?

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

      0  

    Default


    EXTJS 4.0

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi