Results 1 to 7 of 7

Thread: Ext JS 4.2 - Using a Form to Navigate a recordset

  1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default Ext JS 4.2 - Using a Form to Navigate a recordset

    Hello,

    I'm looking to use a form to navigate thru a recordset. The closest example that I was able to find was the "Form with Grid" example that can be seen here: http://tinyurl.com/mxtspqe

    All I'm really looking to do is to add "previous" and "next" buttons to the form shown in the example that would mimic the record selection on the grid (when you select a record on the grid, the data appears in the form)

    Any direction is greatly appreciated.

    thanks!

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

    You should be able to use that example for the most part. To navigate through the records and select them you can use the selectionModel's selectNext and selectPrevious to great effect:
    http://docs.sencha.com/extjs/4.2.1/#...hod-selectNext
    http://docs.sencha.com/extjs/4.2.1/#...selectPrevious

    You'll just need to get a reference to the selection model which you can do by referencing your grid and doing grid.getSelectionModel()
    http://docs.sencha.com/extjs/4.2.1/#...SelectionModel

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Thanks for the info. I'm going to give it a shot tomorrow

  4. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Ok, here's a newbie question for you. How would I render the example given here:

    http://tinyurl.com/mxtspqe

    as a standalone page (without "Kitchen Sink" panels) so that I can work with the core .js file?

    thanks in advance!

  5. #5
    Sencha User
    Join Date
    Jul 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    So I took a first crack at separating out the code shown in Kitchen sink to standalone code but I'm getting the following error:

    TypeError: e.dockedItems is undefined

    Any thoughts as to why I'm getting this error? What follows is the current version of the code:

    Thanks



    Code:
    Ext.require([
    'Ext.grid.*',
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.form.Panel'
    ]);
    
    Ext.onReady(function(){
        
    
        Ext.define('Company', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'company'},
                {name: 'price', type: 'float'},
                {name: 'change', type: 'float'},
                {name: 'pctChange', type: 'float'},
                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                {name: 'industry'},
                {name: 'desc'}
             ]
        });
        // Array data for the grids
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
        ];
        
        var win2 = Ext.create('Ext.window.Window', {
        
        xtype: 'basic-window',
        title: 'Company data',
        bodyPadding: 5,
        
        initComponent: function(){
            
            Ext.apply(this, {
                width: 880,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 90,
                    anchor: '100%',
                    msgTarget: 'side'
                },
    
                items: [{
                    columnWidth: 0.65,
                    xtype: 'gridpanel',
                    store: new Ext.data.Store({
                        model: Company,
                        proxy: {
                            type: 'memory',
                            reader: {
                                type: 'array'
                            }
                        },
                        data: myData
                    }),
                    height: 400,
                    columns: [{
                        text: 'Company',
                        flex: 1,
                        sortable: true,
                        dataIndex: 'company'
                    }, {
                        text: 'Price',
                        width: 75,
                        sortable: true,
                        dataIndex: 'price'
                    }, {
                        text: 'Change',
                        width: 80,
                        sortable: true,
                        renderer: this.changeRenderer,
                        dataIndex: 'change'
                    }, {
                        text: '% Change',
                        width: 100,
                        sortable: true,
                        renderer: this.pctChangeRenderer,
                        dataIndex: 'pctChange'
                    }, {
                        text: 'Last Updated',
                        width: 115,
                        sortable: true,
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                        dataIndex: 'lastChange'
                    }, {
                        text: 'Rating',
                        width: 60,
                        sortable: true,
                        renderer: this.renderRating,
                        dataIndex: 'rating'
                    }],
                    listeners: {
                        scope: this,
                        selectionchange: this.onSelectionChange
                    }
                }, {
                    columnWidth: 0.35,
                    margin: '0 0 0 10',
                    xtype: 'fieldset',
                    title:'Company details',
                    layout: 'anchor',
                    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'
                        }]
                    }]
                }]
            });
            this.callParent();
            
        },
        
        changeRenderer: function(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        },
        
        pctChangeRenderer: function(val){
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        },
        
        renderRating: function(val){
            switch (val) {
                case 0:
                    return 'A';
                case 1:
                    return 'B';
                case 2:
                    return 'C';
            }
        },
        
        onSelectionChange: function(model, records) {
            var rec = records[0];
            if (rec) {
                this.getForm().loadRecord(rec);
            }
        }
        
    });
    win2.show();
    });

  6. #6
    Sencha User
    Join Date
    Jul 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    So I was able to get the "Kitchen Sink" version of the "Form with Grid" (http://tinyurl.com/mxtspqe) example to work as a standalone . Special thanks to this thread on finding the resolution:

    http://stackoverflow.com/questions/1...error-in-extjs

    Now its off to get the navigation to work.

    Here is the code if anyone is interested:

    Code:
    Ext.require([
    'Ext.grid.*',
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.form.Panel'
    ]);
    
    Ext.onReady(function(){
        
    
        Ext.define('Company', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'company'},
                {name: 'price', type: 'float'},
                {name: 'change', type: 'float'},
                {name: 'pctChange', type: 'float'},
                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                {name: 'industry'},
                {name: 'desc'}
             ]
        });
        // Array data for the grids
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
        ];
        
        var form = Ext.create('Ext.form.Panel', {
                    columnWidth: 0.35,
                    margin: '0 0 0 10',
                    xtype: 'fieldset',
                    title:'Company details',
                    layout: 'anchor',
                    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'
                        }]
                    }]
                });
        
        var win2 = Ext.create('Ext.window.Window', {
        
        xtype: 'basic-window',
        title: 'Company data',
        bodyPadding: 5,
        
                width: 880,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 90,
                    anchor: '100%',
                    msgTarget: 'side'
                },
    
                items: [{
                    columnWidth: 0.65,
                    xtype: 'gridpanel',
                    store: new Ext.data.Store({
                        model: Company,
                        proxy: {
                            type: 'memory',
                            reader: {
                                type: 'array'
                            }
                        },
                        data: myData
                    }),
                    height: 400,
                    columns: [{
                        text: 'Company',
                        flex: 1,
                        sortable: true,
                        dataIndex: 'company'
                    }, {
                        text: 'Price',
                        width: 75,
                        sortable: true,
                        dataIndex: 'price'
                    }, {
                        text: 'Change',
                        width: 80,
                        sortable: true,
             
                       renderer: function(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        },
                        dataIndex: 'change'
                    }, {
                        text: '% Change',
                        width: 100,
                        sortable: true,
                        renderer: function(val){
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        },
                        dataIndex: 'pctChange'
                    }, {
                        text: 'Last Updated',
                        width: 115,
                        sortable: true,
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                        dataIndex: 'lastChange'
                    }, {
                        text: 'Rating',
                        width: 60,
                        sortable: true,
                        renderer: function(val){
            switch (val) {
                case 0:
                    return 'A';
                case 1:
                    return 'B';
                case 2:
                    return 'C';
            }
        },
                        dataIndex: 'rating'
                    }],
                    listeners: {
                      selectionchange: function(model, records) {
            var rec = records[0];
            if (rec) {
                form.loadRecord(rec);
            }
        }
                    }
                },form]
    
            
        
    });
    win2.show();
    });

  7. #7
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

    And thanks for sharing your code. No doubt your efforts will help someone else in the future.

Tags for this Thread

Posting Permissions

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