Results 1 to 4 of 4

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

    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
    115
    Vote Rating
    28
      0  

    Default [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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    That fix should handle this. I would still stay away from JavaScript reserved words.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

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

  3. #3

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •