Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. 8 Mar 2012 6:55 AM #1
    KajaSheen
    KajaSheen is offline
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    96
    Vote Rating
    6
    KajaSheen is on a distinguished road
      0  

    Default [4.1 B3] form.loadRecords breaks when record contains field 'length'

    [4.1 B3] form.loadRecords breaks when record contains field 'length'


    I think this is related to EXTJSIV-5217. I have a field named 'length' in my model. Using it in a grid now works fine, just as does any other reserved keyword I tried. But now, when linking this to a form and doing a loadRecord(), it does not work.

    I changed the form-grid example to reflect this:

    Code:
    Ext.require([
    'Ext.form.*',
    'Ext.data.*',
    'Ext.grid.Panel',
    'Ext.layout.container.Column'
]);


Ext.onReady(function(){

    Ext.QuickTips.init();

    var bd = Ext.getBody();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am', '2'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am', '1'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am', '1'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am', '1'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am', '1'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am', '1'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am', '1'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am', '1'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am', '1'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am', '1'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am', '1'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am', '1'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am', '1'],
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am', '1'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am', '1'],
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am', '1'],
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am', '1'],
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am', '1'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am', '1'],
        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am', '1'],
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am', '1'],
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am', '1'],
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am', '1'],
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am', '1'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am', '1'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am', '1'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am', '1'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am', '1'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am', '1']
    ];

    var ds = Ext.create('Ext.data.ArrayStore', {
        fields: [
            {name: 'company'},
            {name: 'price',      type: 'float'},
            {name: 'change',     type: 'float'},
            {name: 'pctChange',  type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
            // Rating dependent upon performance 0 = best, 2 = worst
            {name: 'rating', type: 'int', convert: function(value, record) {
                var pct = record.get('pctChange');
                if (pct < 0) return 2;
                if (pct < 1) return 1;
                return 0;
            }},
            {name: 'length'}
        ],
        data: myData
    });


    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
    
    // render rating as "A", "B" or "C" depending upon numeric value.
    function rating(v) {
        if (v == 0) return "A";
        if (v == 1) return "B";
        if (v == 2) return "C";
    }


    bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

    /*
     * Here is where we create the Form
     */
    var gridForm = Ext.create('Ext.form.Panel', {
        id: 'company-form',
        frame: true,
        title: 'Company data',
        bodyPadding: 5,
        width: 850,
        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },

        items: [{
            columnWidth: 0.60,
            xtype: 'gridpanel',
            store: ds,
            height: 400,
            title:'Company Data',

            columns: [
                {
                    id       :'company',
                    text   : 'Company',
                    flex: 1,
                    sortable : true,
                    dataIndex: 'company'
                },
                {
                    text   : 'Price',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'price'
                },
                {
                    text   : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text   : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text   : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    text: 'Rating',
                    width: 30,
                    sortable: true,
                    renderer: rating,
                    dataIndex: 'rating'
                },
                {
                    text   : 'Length',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'length'
                }
            ],

            listeners: {
                selectionchange: function(model, records) {
                    if (records[0]) {
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        }, {
            columnWidth: 0.4,
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title:'Company details',
            defaults: {
                width: 240,
                labelWidth: 90
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            },{
                fieldLabel: 'Price',
                name: 'price'
            },{
                fieldLabel: '% Change',
                name: 'pctChange'
            },{
                xtype: 'datefield',
                fieldLabel: 'Last Updated',
                name: 'lastChange'
            }, {
                xtype: 'radiogroup',
                fieldLabel: 'Rating',
                columns: 3,
                defaults: {
                    name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
                },
                items: [{
                    inputValue: '0',
                    boxLabel: 'A'
                }, {
                    inputValue: '1',
                    boxLabel: 'B'
                }, {
                    inputValue: '2',
                    boxLabel: 'C'
                }]
            },{                
                fieldLabel: 'Length',
                name: 'length'
            }]
        }],
        renderTo: bd
    });


    gridForm.child('gridpanel').getSelectionModel().select(0);
});
    Reply With Quote Reply With Quote
  2. 8 Mar 2012 4:03 PM #2
    mitchellsimoens
    mitchellsimoens is online now
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,639
    Vote Rating
    435
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    That fix should handle this. I would still stay away from JavaScript reserved words.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  3. 8 Mar 2012 11:34 PM #3
    mankz
    mankz is offline
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Helsingborg, Sweden
    Posts
    2,455
    Vote Rating
    50
    mankz is a jewel in the rough mankz is a jewel in the rough mankz is a jewel in the rough
      0  

    Default


    length is not a JS reserved word, this sounds like an Ext bug...

    https://developer.mozilla.org/en/Jav...Reserved_Words
    Reply With Quote Reply With Quote
  4. 9 Mar 2012 2:28 AM #4
    KajaSheen
    KajaSheen is offline
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    96
    Vote Rating
    6
    KajaSheen is on a distinguished road
      0  

    Default


    I'd like to stay away from that word, but my backend guys provide me with the model and it seems that the backend object needs to have length. And it does not help to rename the field or do a mapping, since the submitted name of the field should be length...

    Any suggestions, or do you need additional input, since the message says, that the test case is bad?

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1 B3

    Browser versions tested against:
    • IE8
    • FF10 (firebug 1.9)
    • Safari 4

    DOCTYPE tested against:
    • strict

    Description:
    • Like above, my model has a field named length. When doing a form.loadRecord(record) the whole form stays empty.

    Steps to reproduce the problem:
    • Have a model with 'length'
    • Create a record and a form and do a form.loadRecord()

    The result that was expected:
    • Form displays the values loaded

    The result that occurs instead:
    • Form is empty

    Test Case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Form with embedded Grid</title>
    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- GC -->


    <script type="text/javascript" src="../../ext-all-debug-w-comments.js"></script>

    <!-- Example -->
    <script type="text/javascript" src="form-grid.js"></script>
</head>
<body>
    <h1>Dynamic Form interacting with an embedded Grid</h1>

    <p>
        This Form demonstrates the fact that by virtue of inheriting from the Ext <b><tt>Container</tt></b>
        class, an Ext.form.Panel can contain any Ext <b><tt>Component</tt></b>. This includes all the
        subclasses of Ext.Panel, including the GridPanel.
    </p>
    <p>
        The Grid demonstrates the use of creation of derived fields in a Record created using a custom
        <b><tt>convert</tt></b> function, and the use of column renderers.
    </p>
    <p>
        The Form demonstrates the use of radio buttons grouped by name being set by the value of the derived
        'rating' field.
    </p>
</body>
</html>
    Code:
    Ext.require([
    'Ext.form.*',
    'Ext.data.*',
    'Ext.grid.Panel',
    'Ext.layout.container.Column'
]);


Ext.onReady(function(){

    Ext.QuickTips.init();

    var bd = Ext.getBody();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am', '2'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am', '1'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am', '1'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am', '1'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am', '1'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am', '1'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am', '1'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am', '1'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am', '1'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am', '1'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am', '1'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am', '1'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am', '1'],
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am', '1'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am', '1'],
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am', '1'],
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am', '1'],
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am', '1'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am', '1'],
        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am', '1'],
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am', '1'],
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am', '1'],
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am', '1'],
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am', '1'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am', '1'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am', '1'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am', '1'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am', '1'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am', '1']
    ];

    var ds = Ext.create('Ext.data.ArrayStore', {
        fields: [
            {name: 'company'},
            {name: 'price',      type: 'float'},
            {name: 'change',     type: 'float'},
            {name: 'pctChange',  type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
            // Rating dependent upon performance 0 = best, 2 = worst
            {name: 'rating', type: 'int', convert: function(value, record) {
                var pct = record.get('pctChange');
                if (pct < 0) return 2;
                if (pct < 1) return 1;
                return 0;
            }},
            {name: 'length'}
        ],
        data: myData
    });


    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
    
    // render rating as "A", "B" or "C" depending upon numeric value.
    function rating(v) {
        if (v == 0) return "A";
        if (v == 1) return "B";
        if (v == 2) return "C";
    }


    bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

    /*
     * Here is where we create the Form
     */
    var gridForm = Ext.create('Ext.form.Panel', {
        id: 'company-form',
        frame: true,
        title: 'Company data',
        bodyPadding: 5,
        width: 850,
        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },

        items: [{
            columnWidth: 0.60,
            xtype: 'gridpanel',
            store: ds,
            height: 400,
            title:'Company Data',

            columns: [
                {
                    id       :'company',
                    text   : 'Company',
                    flex: 1,
                    sortable : true,
                    dataIndex: 'company'
                },
                {
                    text   : 'Price',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'price'
                },
                {
                    text   : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text   : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text   : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    text: 'Rating',
                    width: 30,
                    sortable: true,
                    renderer: rating,
                    dataIndex: 'rating'
                },
                {
                    text   : 'Length',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'length'
                }
            ],

            listeners: {
                selectionchange: function(model, records) {
                    if (records[0]) {
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        }, {
            columnWidth: 0.4,
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title:'Company details',
            defaults: {
                width: 240,
                labelWidth: 90
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            },{
                fieldLabel: 'Price',
                name: 'price'
            },{
                fieldLabel: '% Change',
                name: 'pctChange'
            },{
                xtype: 'datefield',
                fieldLabel: 'Last Updated',
                name: 'lastChange'
            }, {
                xtype: 'radiogroup',
                fieldLabel: 'Rating',
                columns: 3,
                defaults: {
                    name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
                },
                items: [{
                    inputValue: '0',
                    boxLabel: 'A'
                }, {
                    inputValue: '1',
                    boxLabel: 'B'
                }, {
                    inputValue: '2',
                    boxLabel: 'C'
                }]
            },{                
                fieldLabel: 'Length',
                name: 'length'
            }]
        }],
        renderTo: bd
    });


    gridForm.child('gridpanel').getSelectionModel().select(0);
});

    HELPFUL INFORMATION

    See this URL for live test case:
    http://dl.dropbox.com/u/3319901/extj...form-grid.html


    Debugging already done:
    • FB Output:
      me is not defined
      /ext-all-debug-w-comments.js
      Line 124085

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win7 Pro
    Reply With Quote Reply With Quote