Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hi,
I'm learning ExtJS 4 and trying out to create a simple application. My application will send Exployee ID to the DB and then the details will get populated on the View. Please help me out with this. I even want to know a better resource where I can learn ExtJS 4.
The code that I have written is :
 
View
Employee.js
 
var screenAdisplay = Ext.define('SAT.view.ScreenA', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.screenA',
     name: 'ScreenA' ,
    width: '80%',
    height: 800,
    title: 'Employee DESCRIPTION',
    layout: 'column',
     border: false,
 
    items: [
                     {
                         xtype: 'panel',
                         title: '',
                         height: 50,
                         width: '100%',
                         items:[
                                      {
                                                xtype: 'form',
                                                id: ''EmployeeDescriptions',
                                                // margin: '5 5 5 5',
                                                width: '100%',
                                                cls: 'extraGrayPanel',
                                                style: {
                                                    borderBottom: 'solid 1px #fff'
                                                },
                                                height: 50,
                                                layout: 'hbox',
                                                padding: '5 10',
                                                defaults: {
                                                    border: false,
                                                    margin: '0 10 0 0',
                                                    layout: 'anchor'
                                                },
 
                                                //hidden: false
                                                items: [
 
                                                            {
                                                                xtype: 'textfield',
                                                                cls: 'shadowField',
                                                                id: 'employeeID',
                                                                name: 'employeeID',
                                                                fieldLabel: 'Employee ID',
                                                                labelWidth: 40,
                                                                labelAlign: 'right',
                                                                width: 175,
                                                                margin: '0 5 0 1',
                                                            },{
                                                                name: 'btnSubmit',
                                                                xtype: 'button',
                                                                id: 'btnSubmit',
                                                                cls: 'apply-button',
                                                                text: 'Submit',
                                                                overCls: 'apply-button-hover'
                                                            }
                                                        ]
                                }
 

                         ]
 

                      },
                     {
                     xtype:'panel',
                     title: 'Employee Details',
                     height: 500,
                     collapsible: true,
                     name: 'EmployeePanel',
                     itemId: 'EmployeePanel',
                     layout: 'column',
                      border: false,
                     width: '100%',
                     items:[
                                    {
                                        xtype: 'panel',
                                        title: '',
                                        height: 220,
                                        width: '100%',
                                        layout: {
                                                    type: 'table',
                                                     columns: 2
                                                        },
                                        defaults: {    bodyStyle:'padding:20px'         },
 
                                        items: [
                                          {
                                              xtype: 'textfield',
                                              cls: 'shadowField',
                                              id: 'empID',
                                              name: 'empID',
                                              fieldLabel: 'Employee ID',
                                              labelAlign: 'right',
                                              disabled: false,
                                              margin: '0 5 0 1'
                                          },{
                                              xtype: 'textfield',
                                              cls: 'shadowField',
                                              id: 'empName',
                                              name: 'empName',
                                              fieldLabel: 'Employee Name',
                                              labelAlign: 'right',
                                              disabled: false,
                                              margin: '0 5 0 1'
                                           }
                                        ]
                                    }
                             ]
                       }
    ]
 

});
 

In controller I have :
 
Ext.define('SAT.controller.ScreenA', {
    extend: 'Ext.app.Controller',
 
    views: [        
        'ScreenA'
    ],
 
    init: function () {
        this.control({
            'button[name=btnSubmit]':
                {
                    click: this.onClickSubmitBtn
                }
        });
    },
 
    onClickSubmitBtn: function (button, event) {
 
        var empID= button.up().items.items[0].value;
        var param = { EmployeeID: empID };
 
        Ext.Ajax.request({
            method: 'POST',
            url: 'Default.aspx/FetchData',
            headers: {
                'Content-type': 'application/json; charset=utf-8'
            },
            params: Ext.encode(param),
            success: function (result, request) {
                debugger;
                var retData = (result.responseText);
                retData = eval("(" + retData + ")");
                retData = retData.d;
                if (retData != null) {
a
                }
            },
            failure: function (result, request) {
                alert("failed");
            }
        });
 
        //debugger;
    }
 
});
 

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Services;
using System.Web.Services;
 
namespace SAT_POC_TAB
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
        //[ScriptMethod]
        public static Employee FetchData(string employeeID)
        {
         //Here there will be code that fetch data from database or web services which and return the object of Employee containing ID and Name
        Employee e = new Employee();
        e.ID = ....
        e.Name = ....
        return e;
        }
    }
}
 
Please help me how to use store and model to bind the return object to the textbox on View.
Thanks
Posted 3-Jan-13 23:52pm
Edited 4-Jan-13 1:19am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi can you send me the example code
  Permalink  
Comments
sagar wasule at 13-Nov-13 4:53am
   
Hi Kanjolia, Even I have stopped working on this code so cannot share it with you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Sergey Alexandrovich Kryukov 437
1 sanket saxena 355
2 thatraja 240
3 Abhinav S 216
4 CPallini 215
0 Sergey Alexandrovich Kryukov 8,784
1 OriginalGriff 5,025
2 Peter Leow 3,839
3 Maciej Los 3,535
4 Er. Puneet Goel 3,107


Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 13 Nov 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid