Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Exclamation [CLOSED][3.??] data.Connection#render calls Ext.urlEncode() instead of Ext.encode()

    [CLOSED][3.??] data.Connection#render calls Ext.urlEncode() instead of Ext.encode()


    Hi,

    I believe I've located a bug in 3.0 that causes incompatibility with ASP.NET and WCF services. I'm using the grid with an HttpProxy to send data to a .NET WCF service. After building up request params in the Connection class' request() function, the param object (var p) is replaced with an encoded version of itself.

    Unfortunately, it's urlEncoded when it (in my case, at least) should be encoded only ( Ext.urlEncode() vs Ext.encode() ). The code should probably be checking to see if you're doing a POST or a GET to determine which type of encoding to do.

    The current code reads:
    Code:
    p = Ext.urlEncode(me.extraParams, typeof p == 'object' ? Ext.urlEncode(p) : p);
    However, my current operation is a POST. The following code fixes my issue:
    Code:
    p = Ext.encode(p);
    However, the best solution will need to check to see if the current operation is POST or GET and then to use either of the above accordingly. A possible solution is to move the following call
    Code:
    method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
    to above the assignment to p and then change the assignment to p to the following code:
    Code:
    if (method == GET) 
       p = Ext.urlEncode(me.extraParams, typeof p == 'object' ? Ext.urlEncode(p) : p);
    else 
       p = Ext.encode(p);
    Thoughts?

    Thanks,

    Matt Walters
    Last edited by mystix; 2 Jun 2009 at 7:34 PM. Reason: POST CODE IN [code][/code] TAGS!!!

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    What happens if you do a post to a non WCF service? Can you access the post data as per usual?

    Also, what is the actual problem, what do you see as the parameters of the request in Firebug?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Lightbulb


    I haven't tried posting to a non-WCF service.

    However, just to dive into the thought process - The way that WCF works is that it will auto detect the proper method to deserialize (rehydrate objects) incoming data by inspecting the content-type header. If the content type indicates xml, it will spin up an XmlSerializer class. If the content type indicates Json, it will spin up a JsonSerializer (the actual class names are different, but you get the point).

    So, if I were to point this at a plain http handler, for instance, I'm sure I'd be able to inspect the items in the post. However, the formatting will definitely blow up using tools like WCF because it's assuming a format to match the content-type.

    Using the current code, my post data looks like the following:

    Code:
    rows=%7B%22IsSelected%22%3Atrue%2C%22Employee.NameLastCommaFirst%22%3A%22MORALES%2C%20KEN%22%2C%22Employee.PayMode.Name%22%3A%22Salaried%22%2C%22Employee.PayGroup.Name%22%3A%22IZOD%20DESIGNER%20%22%2C%22Employee.OrganizationalUnit.Name%22%3A%22IZOD%20SAN%20DIEGO%22%2C%22Employee.Earnings.E01.WorkHours%22%3A86.67%2C%22Employee.Earnings.E01.Amount%22%3A0%2C%22Employee.Earnings.E02.WorkHours%22%3Anull%2C%22Employee.Earnings.E02.Amount%22%3A%22%22%2C%22Employee.Earnings.E03.WorkHours%22%3Anull%2C%22Employee.Earnings.E03.Amount%22%3A%22%22%2C%22Employee.Earnings.E04.WorkHours%22%3Anull%2C%22Employee.Earnings.E04.Amount%22%3A%22%22%2C%22Employee.Earnings.E05.WorkHours%22%3Anull%2C%22Employee.Earnings.E05.Amount%22%3A%22%22%2C%22Employee.Earnings.E06.WorkHours%22%3Anull%2C%22Employee.Earnings.E06.Amount%22%3A%22%22%2C%22Employee.Earnings.E07.WorkHours%22%3Anull%2C%22Employee.Earnings.E07.Amount%22%3A%22%22%2C%22Employee.Earnings.E08.WorkHours%22%3Anull%2C%22Employee.Earnings.E08.Amount%22%3A%22%22%2C%22Employee.Earnings.E09.WorkHours%22%3Anull%2C%22Employee.Earnings.E09.Amount%22%3A%22%22%2C%22Employee.Earnings.E10.WorkHours%22%3Anull%2C%22Employee.Earnings.E10.Amount%22%3A%22%22%2C%22Employee.Earnings.E11.WorkHours%22%3Anull%2C%22Employee.Earnings.E11.Amount%22%3A%22%22%2C%22Employee.Earnings.E12.WorkHours%22%3Anull%2C%22Employee.Earnings.E12.Amount%22%3A%22%22%2C%22Employee.Earnings.E20.WorkHours%22%3Anull%2C%22Employee.Earnings.E20.Amount%22%3A%22%22%2C%22Employee.Deductions.D01.AmountOrPercent%22%3A%22%22%2C%22Employee.Deductions.D02.AmountOrPercent%22%3A%22%22%2C%22Employee.Deductions.D04.AmountOrPercent%22%3A%22%22%2C%22Employee.Deductions.D05.AmountOrPercent%22%3A%22%22%2C%22Employee.Earnings.E01.HourlyRate%22%3Anull%2C%22Employee.Earnings.E01.RateFactor%22%3A1%2C%22Employee.Earnings.E02.HourlyRate%22%3Anull%2C%22Employee.Earnings.E02.RateFactor%22%3A1%2C%22Employee.Earnings.E03.HourlyRate%22%3Anull%2C%22Employee.Earnings.E03.RateFactor%22%3A1.5%2C%22Employee.Earnings.E04.HourlyRate%22%3Anull%2C%22Employee.Earnings.E04.RateFactor%22%3A1%2C%22Employee.Earnings.E05.HourlyRate%22%3Anull%2C%22Employee.Earnings.E05.RateFactor%22%3A1%2C%22Employee.Earnings.E06.HourlyRate%22%3Anull%2C%22Employee.Earnings.E06.RateFactor%22%3A1%2C%22Employee.Earnings.E07.HourlyRate%22%3Anull%2C%22Employee.Earnings.E07.RateFactor%22%3A1%2C%22Employee.Earnings.E08.HourlyRate%22%3Anull%2C%22Employee.Earnings.E08.RateFactor%22%3A1%2C%22Employee.Earnings.E09.HourlyRate%22%3Anull%2C%22Employee.Earnings.E09.RateFactor%22%3A1%2C%22Employee.Earnings.E10.HourlyRate%22%3Anull%2C%22Employee.Earnings.E10.RateFactor%22%3A1%2C%22Employee.Earnings.E11.HourlyRate%22%3Anull%2C%22Employee.Earnings.E11.RateFactor%22%3A1%2C%22Employee.Earnings.E12.HourlyRate%22%3Anull%2C%22Employee.Earnings.E12.RateFactor%22%3A1%2C%22Employee.Earnings.E20.HourlyRate%22%3Anull%2C%22Employee.Earnings.E20.RateFactor%22%3A1%2C%22undefined%22%3A%22ext-record-2%22%7D&xaction=create
    
    Here is what my post data looks like after modifying the code to properly encode instead of urlencode:
    
    {"rows":"{\"IsSelected\":true,\"Employee.NameLastCommaFirst\":\"KITE, MOON\",\"Employee.PayMode.Name
    \":\"Hourly\",\"Employee.PayGroup.Name\":\"IZOD DESIGNER \",\"Employee.OrganizationalUnit.Name\":\"IZOD
     SAN DIEGO\",\"Employee.Earnings.E01.WorkHours\":\"\",\"Employee.Earnings.E01.Amount\":0,\"Employee.Earnings
    .E02.WorkHours\":86.6666,\"Employee.Earnings.E02.Amount\":3033.33,\"Employee.Earnings.E03.WorkHours\"
    :10,\"Employee.Earnings.E03.Amount\":825,\"Employee.Earnings.E04.WorkHours\":null,\"Employee.Earnings
    .E04.Amount\":\"\",\"Employee.Earnings.E05.WorkHours\":null,\"Employee.Earnings.E05.Amount\":\"\",\"Employee
    .Earnings.E06.WorkHours\":null,\"Employee.Earnings.E06.Amount\":\"\",\"Employee.Earnings.E07.WorkHours
    \":null,\"Employee.Earnings.E07.Amount\":\"\",\"Employee.Earnings.E08.WorkHours\":null,\"Employee.Earnings
    .E08.Amount\":\"\",\"Employee.Earnings.E09.WorkHours\":null,\"Employee.Earnings.E09.Amount\":\"\",\"Employee
    .Earnings.E10.WorkHours\":null,\"Employee.Earnings.E10.Amount\":\"\",\"Employee.Earnings.E11.WorkHours
    \":null,\"Employee.Earnings.E11.Amount\":\"\",\"Employee.Earnings.E12.WorkHours\":null,\"Employee.Earnings
    .E12.Amount\":\"\",\"Employee.Earnings.E20.WorkHours\":null,\"Employee.Earnings.E20.Amount\":\"\",\"Employee
    .Deductions.D01.AmountOrPercent\":0,\"Employee.Deductions.D02.AmountOrPercent\":\"\",\"Employee.Deductions
    .D04.AmountOrPercent\":\"\",\"Employee.Deductions.D05.AmountOrPercent\":\"\",\"Employee.Earnings.E01
    .HourlyRate\":null,\"Employee.Earnings.E01.RateFactor\":1,\"Employee.Earnings.E02.HourlyRate\":35,\"Employee
    .Earnings.E02.RateFactor\":1,\"Employee.Earnings.E03.HourlyRate\":55,\"Employee.Earnings.E03.RateFactor
    \":1.5,\"Employee.Earnings.E04.HourlyRate\":null,\"Employee.Earnings.E04.RateFactor\":1,\"Employee.Earnings
    .E05.HourlyRate\":null,\"Employee.Earnings.E05.RateFactor\":1,\"Employee.Earnings.E06.HourlyRate\":null
    ,\"Employee.Earnings.E06.RateFactor\":1,\"Employee.Earnings.E07.HourlyRate\":null,\"Employee.Earnings
    .E07.RateFactor\":1,\"Employee.Earnings.E08.HourlyRate\":null,\"Employee.Earnings.E08.RateFactor\":1
    ,\"Employee.Earnings.E09.HourlyRate\":null,\"Employee.Earnings.E09.RateFactor\":1,\"Employee.Earnings
    .E10.HourlyRate\":null,\"Employee.Earnings.E10.RateFactor\":1,\"Employee.Earnings.E11.HourlyRate\":null
    ,\"Employee.Earnings.E11.RateFactor\":1,\"Employee.Earnings.E12.HourlyRate\":null,\"Employee.Earnings
    .E12.RateFactor\":1,\"Employee.Earnings.E20.HourlyRate\":null,\"Employee.Earnings.E20.RateFactor\":1
    ,\"undefined\":\"ext-record-1\"}","xaction":"create"}
    The former is urlEncoded, which doesn't seem to make sense for post data. The latter is well formed json.

    Thanks,

    Matt Walters
    Last edited by evant; 2 Jun 2009 at 9:40 AM. Reason: Please use [code][/code] tags.

  4. #4
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Lightbulb


    Here is my modified version of the request() method on the Ext.data.Connection class that seems to fix the issue:

    Code:
    request: function(o) {
                var me = this;
                if (me.fireEvent(BEFOREREQUEST, me, o)) {
                    if (o.el) {
                        if (!Ext.isEmpty(o.indicatorText)) {
                            me.indicatorText = '<div class="loading-indicator">' + o.indicatorText + "</div>";
                        }
                        if (me.indicatorText) {
                            Ext.getDom(o.el).innerHTML = me.indicatorText;
                        }
                        o.success = (Ext.isFunction(o.success) ? o.success : function() { }).createInterceptor(function(response) {
                            Ext.getDom(o.el).innerHTML = response.responseText;
                        });
                    }
    
                    var p = o.params,
                        url = o.url || me.url,
                        method,
                        cb = { success: handleResponse,
                            failure: handleFailure,
                            scope: me,
                            argument: { options: o },
                            timeout: o.timeout || me.timeout
                        },
                        form,
                        serForm;
    
    
                    if (Ext.isFunction(p)) {
                        p = p.call(o.scope || WINDOW, o);
                    }
    
                    method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
    
                    if (method == GET)
                        p = Ext.urlEncode(me.extraParams, typeof p == 'object' ? Ext.urlEncode(p) : p);
                    else
                        p = Ext.encode(p);
    
                    if (Ext.isFunction(url)) {
                        url = url.call(o.scope || WINDOW, o);
                    }
    
                    if (form = Ext.getDom(o.form)) {
                        url = url || form.action;
                        if (o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {
                            return doFormUpload.call(me, o, p, url);
                        }
                        serForm = Ext.lib.Ajax.serializeForm(form);
                        p = p ? (p + '&' + serForm) : serForm;
                    }
    
                    // method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
    
                    if (method == GET && (me.disableCaching || o.disableCaching !== false)) {// || o.disableCaching === true){
                        var dcp = o.disableCachingParam || me.disableCachingParam;
                        url += (url.indexOf('?') != -1 ? '&' : '?') + dcp + '=' + (new Date().getTime());
                    }
    
                    o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});
    
                    if (o.autoAbort === true || me.autoAbort) {
                        me.abort();
                    }
    
                    if ((method == GET || o.xmlData || o.jsonData) && p) {
                        url += (/\?/.test(url) ? '&' : '?') + p;
                        p = '';
                    }
    
                    return me.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
                } else {
                    return o.callback ? o.callback.apply(o.scope, [o, UNDEFINED, UNDEFINED]) : null;
                }
            },
    Last edited by evant; 2 Jun 2009 at 9:40 AM. Reason: Please use [code][/code] tags.

  5. #5

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    That code might work well with WCF, however we'll need to look at it further to see if it affects anything else.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Smile


    Sounds good to me. Let me know how it goes.

    Thanks,

    Matt Walters

  8. #8
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Question


    Hi Evan,

    After some additional testing, it looks like the encode function is spitting out mal-formed json. Perhaps I'm doing something wrong, but if you look at the json in the post above, you'll notice that the rows object is getting translated to the following:
    Code:
    {"rows":"{\"IsSelected\":true,\"Employee.NameLastC...
    The important part is the beginning of the rows instance. The { brace there
    is being led by quotation marks. It's missing a [ to mark the beginning of
    the array, and it's using \'s to escape quotes because it thinks the entire
    body is a string.

    This is all data coming from my grid's DataStore.
    What I would have expected is the following:
    Code:
    {"rows": [{ "IsSelected":true,\"Employee.NameLastC...
    Here is the code I'm using to create my grid. Please let me know if you see something that might cause the issue.

    Code:
    Ext.onReady(function() {
        var fm = Ext.form;
        Ext.QuickTips.init();
        var xg = Ext.grid;
    
        // define a custom summary function
        Ext.grid.Summary.Calculations['selectedSum'] = function(v, record, field) {
            if (record.get('selected')) {
                v += parseFloat('0' + record.get(field));
            }
            return v;
        }
    
        var selectionModel = new WF.SelectionModel();
        var arrowContextMenuRowModel = new WF.ArrowContextMenuRowModel();
    
        var columnModel = [
        selectionModel, arrowContextMenuRowModel, {
            header: 'Employee.PayMode.Name',
            width: 120,
            sortable: true,
            dataIndex: 'Employee.PayMode.Name'
        },
        {
            header: 'Employee.PayGroup.Name',
            width: 120,
            sortable: true,
            dataIndex: 'Employee.PayGroup.Name'
        },
        {
            header: 'Employee.OrganizationalUnit.Name',
            width: 120,
            sortable: true,
            dataIndex: 'Employee.OrganizationalUnit.Name'
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E01.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E01.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E01.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E01.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E02.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E02.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E02.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E02.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E03.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E03.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E03.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E03.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E04.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E04.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E04.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E04.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E05.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E05.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E05.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E05.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E06.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E06.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E06.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E06.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E07.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E07.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E07.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E07.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E08.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E08.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E08.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E08.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E09.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E09.WorkHours',
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E09.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E09.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E10.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E10.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E10.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E10.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E11.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E11.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E11.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E11.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E12.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E12.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E12.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E12.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E20.WorkHours',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E20.WorkHours',
            menuDisabled: true,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Earnings.E20.Amount',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Earnings.E20.Amount',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Deductions.D01.AmountOrPercent',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Deductions.D01.AmountOrPercent',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Deductions.D02.AmountOrPercent',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Deductions.D02.AmountOrPercent',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Deductions.D04.AmountOrPercent',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Deductions.D04.AmountOrPercent',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        },
        {
            align: 'right',
            dataIndex: 'Employee.Deductions.D05.AmountOrPercent',
            editor: new fm.NumberField({
                allowBlank: true,
                allowNegative: false
            }),
            header: 'Employee.Deductions.D05.AmountOrPercent',
            menuDisabled: true,
            renderer: WF.util.Format.usMoneyNull,
            sortable: true,
            summaryType: 'selectedSum',
            width: 120
        }];
        var data = {
            "results": 3,
            "rows": [{
                "IsSelected": true,
                "CalendarItemId": 1344,
                "Employee": {
                    "NameLastCommaFirst": "KITE, MOON",
                    "OrganizationalUnit": {
                        "Name": "IZOD SAN DIEGO",
                        "ID": 37
                    },
                    "PayGroup": {
                        "Name": "IZOD DESIGNER ",
                        "ID": 76
                    },
                    "PayMode": {
                        "Name": "Hourly",
                        "ID": 0
                    },
                    "Earnings": {
                        "E01": {
                            "EarningCode": {
                                "Code": "E01",
                                "Name": "Salary",
                                "ID": 235
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E02": {
                            "EarningCode": {
                                "Code": "E02",
                                "Name": "Regular",
                                "ID": 234
                            },
                            "PayPeriodAmount": 3033.33,
                            "PieceWorkAmount": 0.00,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 6082,
                            "Amount": 3033.33,
                            "HourlyRate": 35.000000,
                            "WorkHours": 86.6666,
                            "EmployeeHasEarningOrDeduction": true,
                            "ID": 0
                        },
                        "E03": {
                            "EarningCode": {
                                "Code": "E03",
                                "Name": "Overtime",
                                "ID": 233
                            },
                            "PayPeriodAmount": 825.00,
                            "PieceWorkAmount": 0.00,
                            "RateFactor": 1.500000,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 6081,
                            "Amount": 825.00,
                            "HourlyRate": 55.000000,
                            "WorkHours": 10.0000,
                            "EmployeeHasEarningOrDeduction": true,
                            "ID": 0
                        },
                        "E04": {
                            "EarningCode": {
                                "Code": "E04",
                                "Name": "Vacation",
                                "ID": 232
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E05": {
                            "EarningCode": {
                                "Code": "E05",
                                "Name": "Sick",
                                "ID": 231
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E06": {
                            "EarningCode": {
                                "Code": "E06",
                                "Name": "Holiday",
                                "ID": 230
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E07": {
                            "EarningCode": {
                                "Code": "E07",
                                "Name": "Bonus",
                                "ID": 229
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E08": {
                            "EarningCode": {
                                "Code": "E08",
                                "Name": "Commission",
                                "ID": 228
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E09": {
                            "EarningCode": {
                                "Code": "E09",
                                "Name": "Other",
                                "ID": 227
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E10": {
                            "EarningCode": {
                                "Code": "E10",
                                "Name": "Retro Pay",
                                "ID": 226
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E11": {
                            "EarningCode": {
                                "Code": "E11",
                                "Name": "Funeral",
                                "ID": 225
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E12": {
                            "EarningCode": {
                                "Code": "E12",
                                "Name": "1099",
                                "ID": 224
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E20": {
                            "EarningCode": {
                                "Code": "E20",
                                "Name": "Reimb",
                                "ID": 223
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "Deductions": {
                        "D01": {
                            "AmountOrPercent": 0.00,
                            "DeductionCode": {
                                "Code": "D01",
                                "Name": "Misc Ded",
                                "ID": 256
                            },
                            "IsPercent": true,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D02": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D02",
                                "Name": "Advance",
                                "ID": 255
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D04": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D04",
                                "Name": "Child Support",
                                "ID": 254
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D05": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D05",
                                "Name": "Post Tax Med",
                                "ID": 253
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "ID": 651
                },
                "LaborDistributionCodeId": 54,
                "PayrollTypeId": 1,
                "ID": 0
            },
            {
                "IsSelected": true,
                "CalendarItemId": 1344,
                "Employee": {
                    "NameLastCommaFirst": "MORALES, KEN",
                    "OrganizationalUnit": {
                        "Name": "IZOD SAN DIEGO",
                        "ID": 37
                    },
                    "PayGroup": {
                        "Name": "IZOD DESIGNER ",
                        "ID": 76
                    },
                    "PayMode": {
                        "Name": "Salaried",
                        "ID": 0
                    },
                    "Earnings": {
                        "E01": {
                            "EarningCode": {
                                "Code": "E01",
                                "Name": "Salary",
                                "ID": 235
                            },
                            "PayPeriodAmount": 3537.50,
                            "PieceWorkAmount": 0.00,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 6080,
                            "Amount": 3537.50,
                            "HourlyRate": null,
                            "WorkHours": 86.6666,
                            "EmployeeHasEarningOrDeduction": true,
                            "ID": 0
                        },
                        "E02": {
                            "EarningCode": {
                                "Code": "E02",
                                "Name": "Regular",
                                "ID": 234
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E03": {
                            "EarningCode": {
                                "Code": "E03",
                                "Name": "Overtime",
                                "ID": 233
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1.500000,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E04": {
                            "EarningCode": {
                                "Code": "E04",
                                "Name": "Vacation",
                                "ID": 232
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E05": {
                            "EarningCode": {
                                "Code": "E05",
                                "Name": "Sick",
                                "ID": 231
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E06": {
                            "EarningCode": {
                                "Code": "E06",
                                "Name": "Holiday",
                                "ID": 230
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E07": {
                            "EarningCode": {
                                "Code": "E07",
                                "Name": "Bonus",
                                "ID": 229
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E08": {
                            "EarningCode": {
                                "Code": "E08",
                                "Name": "Commission",
                                "ID": 228
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E09": {
                            "EarningCode": {
                                "Code": "E09",
                                "Name": "Other",
                                "ID": 227
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E10": {
                            "EarningCode": {
                                "Code": "E10",
                                "Name": "Retro Pay",
                                "ID": 226
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E11": {
                            "EarningCode": {
                                "Code": "E11",
                                "Name": "Funeral",
                                "ID": 225
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E12": {
                            "EarningCode": {
                                "Code": "E12",
                                "Name": "1099",
                                "ID": 224
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E20": {
                            "EarningCode": {
                                "Code": "E20",
                                "Name": "Reimb",
                                "ID": 223
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "Deductions": {
                        "D01": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D01",
                                "Name": "Misc Ded",
                                "ID": 256
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D02": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D02",
                                "Name": "Advance",
                                "ID": 255
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D04": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D04",
                                "Name": "Child Support",
                                "ID": 254
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D05": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D05",
                                "Name": "Post Tax Med",
                                "ID": 253
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "ID": 558
                },
                "LaborDistributionCodeId": 54,
                "PayrollTypeId": 1,
                "ID": 0
            },
            {
                "IsSelected": true,
                "CalendarItemId": 1344,
                "Employee": {
                    "NameLastCommaFirst": "SANDHU, EARTH",
                    "OrganizationalUnit": {
                        "Name": "IZOD SAN DIEGO",
                        "ID": 37
                    },
                    "PayGroup": {
                        "Name": "IZOD DESIGNER ",
                        "ID": 76
                    },
                    "PayMode": {
                        "Name": "Hourly",
                        "ID": 0
                    },
                    "Earnings": {
                        "E01": {
                            "EarningCode": {
                                "Code": "E01",
                                "Name": "Salary",
                                "ID": 235
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E02": {
                            "EarningCode": {
                                "Code": "E02",
                                "Name": "Regular",
                                "ID": 234
                            },
                            "PayPeriodAmount": 7106.66,
                            "PieceWorkAmount": 0.00,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 6079,
                            "Amount": 7106.66,
                            "HourlyRate": 82.000000,
                            "WorkHours": 86.6666,
                            "EmployeeHasEarningOrDeduction": true,
                            "ID": 0
                        },
                        "E03": {
                            "EarningCode": {
                                "Code": "E03",
                                "Name": "Overtime",
                                "ID": 233
                            },
                            "PayPeriodAmount": 150.00,
                            "PieceWorkAmount": 0.00,
                            "RateFactor": 1.500000,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 6078,
                            "Amount": 150.00,
                            "HourlyRate": 20.000000,
                            "WorkHours": 5.0000,
                            "EmployeeHasEarningOrDeduction": true,
                            "ID": 0
                        },
                        "E04": {
                            "EarningCode": {
                                "Code": "E04",
                                "Name": "Vacation",
                                "ID": 232
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E05": {
                            "EarningCode": {
                                "Code": "E05",
                                "Name": "Sick",
                                "ID": 231
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E06": {
                            "EarningCode": {
                                "Code": "E06",
                                "Name": "Holiday",
                                "ID": 230
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E07": {
                            "EarningCode": {
                                "Code": "E07",
                                "Name": "Bonus",
                                "ID": 229
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E08": {
                            "EarningCode": {
                                "Code": "E08",
                                "Name": "Commission",
                                "ID": 228
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E09": {
                            "EarningCode": {
                                "Code": "E09",
                                "Name": "Other",
                                "ID": 227
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E10": {
                            "EarningCode": {
                                "Code": "E10",
                                "Name": "Retro Pay",
                                "ID": 226
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E11": {
                            "EarningCode": {
                                "Code": "E11",
                                "Name": "Funeral",
                                "ID": 225
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E12": {
                            "EarningCode": {
                                "Code": "E12",
                                "Name": "1099",
                                "ID": 224
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "E20": {
                            "EarningCode": {
                                "Code": "E20",
                                "Name": "Reimb",
                                "ID": 223
                            },
                            "PayPeriodAmount": null,
                            "PieceWorkAmount": null,
                            "RateFactor": 1,
                            "ShiftPremiumAmount": null,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "TimeEntryId": 0,
                            "Amount": null,
                            "HourlyRate": null,
                            "WorkHours": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "Deductions": {
                        "D01": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D01",
                                "Name": "Misc Ded",
                                "ID": 256
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D02": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D02",
                                "Name": "Advance",
                                "ID": 255
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D04": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D04",
                                "Name": "Child Support",
                                "ID": 254
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        },
                        "D05": {
                            "AmountOrPercent": null,
                            "DeductionCode": {
                                "Code": "D05",
                                "Name": "Post Tax Med",
                                "ID": 253
                            },
                            "IsPercent": false,
                            "STELocationCode": null,
                            "STEMunicipalityCode": null,
                            "STESchoolCode": null,
                            "EmployeeHasEarningOrDeduction": false,
                            "ID": 0
                        }
                    },
                    "ID": 567
                },
                "LaborDistributionCodeId": 54,
                "PayrollTypeId": 1,
                "ID": 0
            }]
        };
    
        var calcRecord = WF.data.CalcRecord.create([{
            name: 'selected',
            mapping: 'IsSelected'
        },
        {
            name: 'Employee.NameLastCommaFirst',
            mapping: 'Employee.NameLastCommaFirst'
        },
        {
            name: 'Employee.PayMode.Name',
            mapping: 'Employee.PayMode.Name'
        },
        {
            name: 'Employee.PayGroup.Name',
            mapping: 'Employee.PayGroup.Name'
        },
        {
            name: 'Employee.OrganizationalUnit.Name',
            mapping: 'Employee.OrganizationalUnit.Name'
        },
        {
            name: 'Employee.Earnings.E01.WorkHours',
            mapping: 'Employee.Earnings.E01.WorkHours',
            dependencies: ['Employee.Earnings.E01.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E01.Amount',
            mapping: 'Employee.Earnings.E01.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E01.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E01.WorkHours') * record.get('Employee.Earnings.E01.HourlyRate') * record.get('Employee.Earnings.E01.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E02.WorkHours',
            mapping: 'Employee.Earnings.E02.WorkHours',
            dependencies: ['Employee.Earnings.E02.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E02.Amount',
            mapping: 'Employee.Earnings.E02.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E02.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E02.WorkHours') * record.get('Employee.Earnings.E02.HourlyRate') * record.get('Employee.Earnings.E02.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E03.WorkHours',
            mapping: 'Employee.Earnings.E03.WorkHours',
            dependencies: ['Employee.Earnings.E03.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E03.Amount',
            mapping: 'Employee.Earnings.E03.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E03.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E03.WorkHours') * record.get('Employee.Earnings.E03.HourlyRate') * record.get('Employee.Earnings.E03.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E04.WorkHours',
            mapping: 'Employee.Earnings.E04.WorkHours',
            dependencies: ['Employee.Earnings.E04.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E04.Amount',
            mapping: 'Employee.Earnings.E04.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E04.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E04.WorkHours') * record.get('Employee.Earnings.E04.HourlyRate') * record.get('Employee.Earnings.E04.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E05.WorkHours',
            mapping: 'Employee.Earnings.E05.WorkHours',
            dependencies: ['Employee.Earnings.E05.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E05.Amount',
            mapping: 'Employee.Earnings.E05.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E05.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E05.WorkHours') * record.get('Employee.Earnings.E05.HourlyRate') * record.get('Employee.Earnings.E05.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E06.WorkHours',
            mapping: 'Employee.Earnings.E06.WorkHours',
            dependencies: ['Employee.Earnings.E06.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E06.Amount',
            mapping: 'Employee.Earnings.E06.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E06.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E06.WorkHours') * record.get('Employee.Earnings.E06.HourlyRate') * record.get('Employee.Earnings.E06.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E07.WorkHours',
            mapping: 'Employee.Earnings.E07.WorkHours',
            dependencies: ['Employee.Earnings.E07.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E07.Amount',
            mapping: 'Employee.Earnings.E07.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E07.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E07.WorkHours') * record.get('Employee.Earnings.E07.HourlyRate') * record.get('Employee.Earnings.E07.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E08.WorkHours',
            mapping: 'Employee.Earnings.E08.WorkHours',
            dependencies: ['Employee.Earnings.E08.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E08.Amount',
            mapping: 'Employee.Earnings.E08.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E08.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E08.WorkHours') * record.get('Employee.Earnings.E08.HourlyRate') * record.get('Employee.Earnings.E08.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E09.WorkHours',
            mapping: 'Employee.Earnings.E09.WorkHours',
            dependencies: ['Employee.Earnings.E09.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E09.Amount',
            mapping: 'Employee.Earnings.E09.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E09.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E09.WorkHours') * record.get('Employee.Earnings.E09.HourlyRate') * record.get('Employee.Earnings.E09.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E10.WorkHours',
            mapping: 'Employee.Earnings.E10.WorkHours',
            dependencies: ['Employee.Earnings.E10.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E10.Amount',
            mapping: 'Employee.Earnings.E10.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E10.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E10.WorkHours') * record.get('Employee.Earnings.E10.HourlyRate') * record.get('Employee.Earnings.E10.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E11.WorkHours',
            mapping: 'Employee.Earnings.E11.WorkHours',
            dependencies: ['Employee.Earnings.E11.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E11.Amount',
            mapping: 'Employee.Earnings.E11.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E11.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E11.WorkHours') * record.get('Employee.Earnings.E11.HourlyRate') * record.get('Employee.Earnings.E11.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E12.WorkHours',
            mapping: 'Employee.Earnings.E12.WorkHours',
            dependencies: ['Employee.Earnings.E12.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E12.Amount',
            mapping: 'Employee.Earnings.E12.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E12.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E12.WorkHours') * record.get('Employee.Earnings.E12.HourlyRate') * record.get('Employee.Earnings.E12.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E20.WorkHours',
            mapping: 'Employee.Earnings.E20.WorkHours',
            dependencies: ['Employee.Earnings.E20.Amount'],
            calc: function() {
                return null;
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Earnings.E20.Amount',
            mapping: 'Employee.Earnings.E20.Amount',
            type: 'float',
            dependencies: ['Employee.Earnings.E20.WorkHours'],
            calc: function(record) {
                return record.get('Employee.Earnings.E20.WorkHours') * record.get('Employee.Earnings.E20.HourlyRate') * record.get('Employee.Earnings.E20.RateFactor');
            },
            recurseCalcs: false
        },
        {
            name: 'Employee.Deductions.D01.AmountOrPercent',
            mapping: 'Employee.Deductions.D01.AmountOrPercent',
            type: 'float'
        },
        {
            name: 'Employee.Deductions.D02.AmountOrPercent',
            mapping: 'Employee.Deductions.D02.AmountOrPercent',
            type: 'float'
        },
        {
            name: 'Employee.Deductions.D04.AmountOrPercent',
            mapping: 'Employee.Deductions.D04.AmountOrPercent',
            type: 'float'
        },
        {
            name: 'Employee.Deductions.D05.AmountOrPercent',
            mapping: 'Employee.Deductions.D05.AmountOrPercent',
            type: 'float'
        },
        {
            name: 'Employee.Earnings.E01.HourlyRate',
            mapping: 'Employee.Earnings.E01.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E01.RateFactor',
            mapping: 'Employee.Earnings.E01.RateFactor'
        },
        {
            name: 'Employee.Earnings.E02.HourlyRate',
            mapping: 'Employee.Earnings.E02.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E02.RateFactor',
            mapping: 'Employee.Earnings.E02.RateFactor'
        },
        {
            name: 'Employee.Earnings.E03.HourlyRate',
            mapping: 'Employee.Earnings.E03.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E03.RateFactor',
            mapping: 'Employee.Earnings.E03.RateFactor'
        },
        {
            name: 'Employee.Earnings.E04.HourlyRate',
            mapping: 'Employee.Earnings.E04.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E04.RateFactor',
            mapping: 'Employee.Earnings.E04.RateFactor'
        },
        {
            name: 'Employee.Earnings.E05.HourlyRate',
            mapping: 'Employee.Earnings.E05.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E05.RateFactor',
            mapping: 'Employee.Earnings.E05.RateFactor'
        },
        {
            name: 'Employee.Earnings.E06.HourlyRate',
            mapping: 'Employee.Earnings.E06.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E06.RateFactor',
            mapping: 'Employee.Earnings.E06.RateFactor'
        },
        {
            name: 'Employee.Earnings.E07.HourlyRate',
            mapping: 'Employee.Earnings.E07.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E07.RateFactor',
            mapping: 'Employee.Earnings.E07.RateFactor'
        },
        {
            name: 'Employee.Earnings.E08.HourlyRate',
            mapping: 'Employee.Earnings.E08.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E08.RateFactor',
            mapping: 'Employee.Earnings.E08.RateFactor'
        },
        {
            name: 'Employee.Earnings.E09.HourlyRate',
            mapping: 'Employee.Earnings.E09.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E09.RateFactor',
            mapping: 'Employee.Earnings.E09.RateFactor'
        },
        {
            name: 'Employee.Earnings.E10.HourlyRate',
            mapping: 'Employee.Earnings.E10.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E10.RateFactor',
            mapping: 'Employee.Earnings.E10.RateFactor'
        },
        {
            name: 'Employee.Earnings.E11.HourlyRate',
            mapping: 'Employee.Earnings.E11.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E11.RateFactor',
            mapping: 'Employee.Earnings.E11.RateFactor'
        },
        {
            name: 'Employee.Earnings.E12.HourlyRate',
            mapping: 'Employee.Earnings.E12.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E12.RateFactor',
            mapping: 'Employee.Earnings.E12.RateFactor'
        },
        {
            name: 'Employee.Earnings.E20.HourlyRate',
            mapping: 'Employee.Earnings.E20.HourlyRate'
        },
        {
            name: 'Employee.Earnings.E20.RateFactor',
            mapping: 'Employee.Earnings.E20.RateFactor'
        }], {
            initialCalc: false
        });
    
        var reader = new Ext.data.JsonReader({
            totalProperty: "results",
            // The property which contains the total dataset size (optional)
            root: "rows" //,                         // The property which contains an Array of row objects
            //id: "ID" // The property within each row object that provides an ID for the record (optional)
        },
        calcRecord);
    
        var writer = new Ext.data.JsonWriter({
            returnJson: true,
            writeAllFields: true
        });
    
        var view = new WF.EventingView({
            forceFit: false,
            selectedRowClass: '',
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        });
    
        var summary = new Ext.grid.GroupSummary();
    
        Ext.lib.Ajax.defaultPostHeader = null;
        jQuery.ajaxSettings.contentType = 'application/json';
    
        /* Custom Data Store */
        Ext.namespace('WF.WCFStore');
        WF.WCFStore.memberProxy = new Ext.data.HttpProxy({
            //headers: { 'Content-Type': 'application/json' },
            prettyUrls: false,
            api: {
                //load: 'EnterPayData.svc/Load',
                create: 'EnterPayData.svc/Add',
                save: 'EnterPayData.svc/Save' //,
                //destroy: 'EnterPayData.svc/Delete'
            }
        });
    
        WF.WCFStore.dataStore = new Ext.data.GroupingStore({
            batchSave: false,
            data: data,
            groupField: 'Employee.PayGroup.Name',
            paramsAsHash: true,
            proxy: WF.WCFStore.memberProxy,
            reader: reader,
            sortInfo: {
                field: 'Employee.NameLastCommaFirst',
                direction: "ASC"
            },
            storeId: 'WCFStore',
            writer: writer
        });
    
        /* End Custom Data Store */
    
        var browserWidth = Ext.lib.Dom.getViewWidth();
    
        var grid = new xg.EditorGridPanel({
            store: WF.WCFStore.dataStore,
            sm: selectionModel,
            columns: columnModel,
            view: view,
            frame: true,
            width: browserWidth - 50,
            height: 450,
            iconCls: 'icon-grid',
            renderTo: 'ctl00_center_EnterEmployeePayrollDataUserControl1_ctl01',
            plugins: [summary, new Ext.grid.GridSummary()],
            clicksToEdit: 1
        });
    
        var eventsSet = false;
        $('.dropArrow').live('mouseover',
        function() {
            $(this).next('.menudiv').animate({
                opacity: 'show',
                left: this.offsetLeft + 20
            },
            'fast');
    
            if (!eventsSet) {
                $('.menudiv').bind('mouseleave',
                function(event) { // 'mouseout' or 'mouseleave'?
                    $(this).animate({
                        opacity: 'hide'
                    },
                    'fast');
                });
                eventsSet = true;
            }
        });
    
        Ext.grid.CheckColumn = function(config) {
            Ext.apply(this, config);
            if (!this.id) {
                this.id = Ext.id();
            }
            this.renderer = this.renderer.createDelegate(this);
        };
    
        Ext.grid.CheckColumn.prototype = {
            init: function(grid) {
                this.grid = grid;
                this.grid.on('render',
                function() {
                    var view = this.grid.getView();
                    view.mainBody.on('mousedown', this.onMouseDown, this);
                },
                this);
            },
            onMouseDown: function(e, t) {
                if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
                    e.stopEvent();
                    var index = this.grid.getView().findRowIndex(t);
                    var record = this.grid.store.getAt(index);
                    record.set(this.dataIndex, !record.data[this.dataIndex]);
                }
            },
            renderer: function(v, p, record) {
                p.css += ' x-grid3-check-col-td';
                return '<div class="x-grid3-check-col' + (v ? '-on': '') + ' x-grid3-cc-' + this.id + '">&#160;</div>';
            }
        };
    });

  9. #9
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Exclamation


    Hmmm. The more I look at my json, the more off it looks.

    I would have expected the following:

    Code:
    {"IsSelected":true,"Employee.NameLastCommaFirst":"KITE, MOON",
    to look more like:

    Code:
    {"IsSelected":true, "Employee" : { "NameLastCommaFirst":"KITE, MOON",
    It looks like my JsonWriter may not be converting my data back to json correctly.

    I don't think there is anything special about my JsonWriter or record def that would prompt irregular behavior.

    Code:
    /// <reference path="jquery-1.3.2-vsdoc.js" />
    /// <reference path="ext-all-debug.js" />
    Ext.namespace('WF');
    Ext.namespace('WF.data');
    
    WF.data.CalcRecord = function(data, id) {
        WF.data.CalcRecord.superclass.constructor.call(this, data, id);
        if (this.initialCalc) {
            this.calcFields();
        }
    }
    WF.data.CalcRecord.create = function(o, s) {
        var f = Ext.extend(WF.data.CalcRecord, {});
        f.preventFallThrough = false;
        f.initialCalc = s.initialCalc;
        var p = f.prototype;
        p.fields = new Ext.util.MixedCollection(false,
        function(field) {
            return field.name;
        });
        for (var i = 0, len = o.length; i < len; i++) {
            p.fields.add(new Ext.data.Field(o[i]));
        }
        f.getField = function(name) {
            return p.fields.get(name);
        };
        return f;
    };
    Ext.extend(WF.data.CalcRecord, Ext.data.Record, {
        set: function(name, value) {
            if (String(this.data[name]) == String(value)) {
                return;
            }
            this.dirty = true;
            if (!this.modified) {
                this.modified = {};
            }
            if (typeof this.modified[name] == 'undefined') {
                this.modified[name] = this.data[name];
            }
            this.data[name] = value;
            if (!this.preventFallThrough) {
                this.calcFields(name);
            }
            if (!this.editing && this.store) {
                this.store.afterEdit(this);
            }
        },
        calcFields: function(name) {
            this.fields.each(function(field) {
                if ((field.name != name) && (typeof field.calc == 'function') && (!name || (!field.dependencies || field.dependencies.indexOf(name) != -1))) {
                    var value = field.calc(this);
                    if (!name || field.notDirty) {
                        this.data[field.name] = value;
                    } else {
                        this.preventFallThrough = !field.recurseCalcs;
                        this.set(field.name, value);
                        this.preventFallThrough = false;
                    }
                }
            },
            this);
        }
    });
    
    
    
    var writer = new Ext.data.JsonWriter({
        returnJson: true,
        writeAllFields: true
    });
    
    
    var calcRecord = WF.data.CalcRecord.create([{
        name: 'selected',
        mapping: 'IsSelected'
    },
    {
        name: 'Employee.NameLastCommaFirst',
        mapping: 'Employee.NameLastCommaFirst'
    },
    {
        name: 'Employee.PayMode.Name',
        mapping: 'Employee.PayMode.Name'
    },
    {
        name: 'Employee.PayGroup.Name',
        mapping: 'Employee.PayGroup.Name'
    },
    {
        name: 'Employee.OrganizationalUnit.Name',
        mapping: 'Employee.OrganizationalUnit.Name'
    },
    {
        name: 'Employee.Earnings.E01.WorkHours',
        mapping: 'Employee.Earnings.E01.WorkHours',
        dependencies: ['Employee.Earnings.E01.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E01.Amount',
        mapping: 'Employee.Earnings.E01.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E01.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E01.WorkHours') * record.get('Employee.Earnings.E01.HourlyRate') * record.get('Employee.Earnings.E01.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E02.WorkHours',
        mapping: 'Employee.Earnings.E02.WorkHours',
        dependencies: ['Employee.Earnings.E02.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E02.Amount',
        mapping: 'Employee.Earnings.E02.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E02.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E02.WorkHours') * record.get('Employee.Earnings.E02.HourlyRate') * record.get('Employee.Earnings.E02.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E03.WorkHours',
        mapping: 'Employee.Earnings.E03.WorkHours',
        dependencies: ['Employee.Earnings.E03.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E03.Amount',
        mapping: 'Employee.Earnings.E03.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E03.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E03.WorkHours') * record.get('Employee.Earnings.E03.HourlyRate') * record.get('Employee.Earnings.E03.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E04.WorkHours',
        mapping: 'Employee.Earnings.E04.WorkHours',
        dependencies: ['Employee.Earnings.E04.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E04.Amount',
        mapping: 'Employee.Earnings.E04.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E04.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E04.WorkHours') * record.get('Employee.Earnings.E04.HourlyRate') * record.get('Employee.Earnings.E04.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E05.WorkHours',
        mapping: 'Employee.Earnings.E05.WorkHours',
        dependencies: ['Employee.Earnings.E05.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E05.Amount',
        mapping: 'Employee.Earnings.E05.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E05.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E05.WorkHours') * record.get('Employee.Earnings.E05.HourlyRate') * record.get('Employee.Earnings.E05.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E06.WorkHours',
        mapping: 'Employee.Earnings.E06.WorkHours',
        dependencies: ['Employee.Earnings.E06.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E06.Amount',
        mapping: 'Employee.Earnings.E06.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E06.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E06.WorkHours') * record.get('Employee.Earnings.E06.HourlyRate') * record.get('Employee.Earnings.E06.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E07.WorkHours',
        mapping: 'Employee.Earnings.E07.WorkHours',
        dependencies: ['Employee.Earnings.E07.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E07.Amount',
        mapping: 'Employee.Earnings.E07.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E07.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E07.WorkHours') * record.get('Employee.Earnings.E07.HourlyRate') * record.get('Employee.Earnings.E07.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E08.WorkHours',
        mapping: 'Employee.Earnings.E08.WorkHours',
        dependencies: ['Employee.Earnings.E08.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E08.Amount',
        mapping: 'Employee.Earnings.E08.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E08.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E08.WorkHours') * record.get('Employee.Earnings.E08.HourlyRate') * record.get('Employee.Earnings.E08.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E09.WorkHours',
        mapping: 'Employee.Earnings.E09.WorkHours',
        dependencies: ['Employee.Earnings.E09.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E09.Amount',
        mapping: 'Employee.Earnings.E09.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E09.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E09.WorkHours') * record.get('Employee.Earnings.E09.HourlyRate') * record.get('Employee.Earnings.E09.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E10.WorkHours',
        mapping: 'Employee.Earnings.E10.WorkHours',
        dependencies: ['Employee.Earnings.E10.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E10.Amount',
        mapping: 'Employee.Earnings.E10.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E10.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E10.WorkHours') * record.get('Employee.Earnings.E10.HourlyRate') * record.get('Employee.Earnings.E10.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E11.WorkHours',
        mapping: 'Employee.Earnings.E11.WorkHours',
        dependencies: ['Employee.Earnings.E11.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E11.Amount',
        mapping: 'Employee.Earnings.E11.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E11.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E11.WorkHours') * record.get('Employee.Earnings.E11.HourlyRate') * record.get('Employee.Earnings.E11.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E12.WorkHours',
        mapping: 'Employee.Earnings.E12.WorkHours',
        dependencies: ['Employee.Earnings.E12.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E12.Amount',
        mapping: 'Employee.Earnings.E12.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E12.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E12.WorkHours') * record.get('Employee.Earnings.E12.HourlyRate') * record.get('Employee.Earnings.E12.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E20.WorkHours',
        mapping: 'Employee.Earnings.E20.WorkHours',
        dependencies: ['Employee.Earnings.E20.Amount'],
        calc: function() {
            return null;
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Earnings.E20.Amount',
        mapping: 'Employee.Earnings.E20.Amount',
        type: 'float',
        dependencies: ['Employee.Earnings.E20.WorkHours'],
        calc: function(record) {
            return record.get('Employee.Earnings.E20.WorkHours') * record.get('Employee.Earnings.E20.HourlyRate') * record.get('Employee.Earnings.E20.RateFactor');
        },
        recurseCalcs: false
    },
    {
        name: 'Employee.Deductions.D01.AmountOrPercent',
        mapping: 'Employee.Deductions.D01.AmountOrPercent',
        type: 'float'
    },
    {
        name: 'Employee.Deductions.D02.AmountOrPercent',
        mapping: 'Employee.Deductions.D02.AmountOrPercent',
        type: 'float'
    },
    {
        name: 'Employee.Deductions.D04.AmountOrPercent',
        mapping: 'Employee.Deductions.D04.AmountOrPercent',
        type: 'float'
    },
    {
        name: 'Employee.Deductions.D05.AmountOrPercent',
        mapping: 'Employee.Deductions.D05.AmountOrPercent',
        type: 'float'
    },
    {
        name: 'Employee.Earnings.E01.HourlyRate',
        mapping: 'Employee.Earnings.E01.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E01.RateFactor',
        mapping: 'Employee.Earnings.E01.RateFactor'
    },
    {
        name: 'Employee.Earnings.E02.HourlyRate',
        mapping: 'Employee.Earnings.E02.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E02.RateFactor',
        mapping: 'Employee.Earnings.E02.RateFactor'
    },
    {
        name: 'Employee.Earnings.E03.HourlyRate',
        mapping: 'Employee.Earnings.E03.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E03.RateFactor',
        mapping: 'Employee.Earnings.E03.RateFactor'
    },
    {
        name: 'Employee.Earnings.E04.HourlyRate',
        mapping: 'Employee.Earnings.E04.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E04.RateFactor',
        mapping: 'Employee.Earnings.E04.RateFactor'
    },
    {
        name: 'Employee.Earnings.E05.HourlyRate',
        mapping: 'Employee.Earnings.E05.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E05.RateFactor',
        mapping: 'Employee.Earnings.E05.RateFactor'
    },
    {
        name: 'Employee.Earnings.E06.HourlyRate',
        mapping: 'Employee.Earnings.E06.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E06.RateFactor',
        mapping: 'Employee.Earnings.E06.RateFactor'
    },
    {
        name: 'Employee.Earnings.E07.HourlyRate',
        mapping: 'Employee.Earnings.E07.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E07.RateFactor',
        mapping: 'Employee.Earnings.E07.RateFactor'
    },
    {
        name: 'Employee.Earnings.E08.HourlyRate',
        mapping: 'Employee.Earnings.E08.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E08.RateFactor',
        mapping: 'Employee.Earnings.E08.RateFactor'
    },
    {
        name: 'Employee.Earnings.E09.HourlyRate',
        mapping: 'Employee.Earnings.E09.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E09.RateFactor',
        mapping: 'Employee.Earnings.E09.RateFactor'
    },
    {
        name: 'Employee.Earnings.E10.HourlyRate',
        mapping: 'Employee.Earnings.E10.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E10.RateFactor',
        mapping: 'Employee.Earnings.E10.RateFactor'
    },
    {
        name: 'Employee.Earnings.E11.HourlyRate',
        mapping: 'Employee.Earnings.E11.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E11.RateFactor',
        mapping: 'Employee.Earnings.E11.RateFactor'
    },
    {
        name: 'Employee.Earnings.E12.HourlyRate',
        mapping: 'Employee.Earnings.E12.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E12.RateFactor',
        mapping: 'Employee.Earnings.E12.RateFactor'
    },
    {
        name: 'Employee.Earnings.E20.HourlyRate',
        mapping: 'Employee.Earnings.E20.HourlyRate'
    },
    {
        name: 'Employee.Earnings.E20.RateFactor',
        mapping: 'Employee.Earnings.E20.RateFactor'
    }], {
        initialCalc: false
    });
    Is it expected behavior to get a post body with a string representation of your records?

    ***
    In short, is the JsonWriter expected to simply save in the format that your column model represents or in the original format of your data model that the record helped to map from? I would have thought the original, but perhaps I'm wrong.
    ***

    Thanks,

    Matt Walters

  10. #10
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    13
    Vote Rating
    0
    matt4447 is on a distinguished road

      0  

    Exclamation


    Alright, I know I'm turning into a posting machine *but* I believe I've located the crux of the problem.

    It appears that JsonWriter doesn't properly restructure data back to the original format of the data store. It stays in the internally mapped structure, as it calls the DataWriter's toHash() function which doesn't seem to rebuild a structured object.

    Code:
    toHash : function(rec) {
        var map = rec.fields.map;
        var data = {};
        var raw = (this.writeAllFields === false && rec.phantom === false) ? rec.getChanges() : rec.data;
        for (var k in raw) {
            data[(map[k].mapping) ? map[k].mapping : map[k].name] = raw[k];
        }
        data[this.meta.idProperty] = rec.id;
        return data;
    }
    Shouldn't JsonWriter have a toHash() implementation that takes items with mapping strings such as "Employee.Name" and puts them in an object similar to { "Employee" : { "Name" : "Matt" } }, instead of { "Employee.Name" : "Matt" } ?

    Thanks,

    Matt Walters