Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    109
    Vote Rating
    8
    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);
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That fix should handle this. I would still stay away from JavaScript reserved words.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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 in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,748
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


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

    https://developer.mozilla.org/en/Jav...Reserved_Words

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    109
    Vote Rating
    8
    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

Thread Participants: 2