1. #461
    Sencha User
    Join Date
    Oct 2009
    Posts
    45
    Vote Rating
    1
    macdoug1 is on a distinguished road

      0  

    Question So can you tell me what might cause the rows to be off?

    So can you tell me what might cause the rows to be off?


    What should I look for in the code that would indicate that rows get a different size then my column headers? I've been tearing this plugin apart trying to find out why it is doing that and can't find the reason - suggestions? Also what can I do if I pass in the column headers to still be able to attach your rowActions to them. The column : Array property doesn't like it if I add more then one value to it. Should I just add that to the array passed in?

  2. #462
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    1. Version of Ext
    2. Version of RecordForm
    3. Differences between my and your code
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #463
    Sencha User
    Join Date
    Oct 2009
    Posts
    45
    Vote Rating
    1
    macdoug1 is on a distinguished road

      0  

    Question Okay so here is what you mentioned

    Okay so here is what you mentioned


    I'm using Ext3.0
    I think you mean the version of recordForm the plugin component Ext.ux.grid.RecordForm v1.0
    Differences in code:
    Code:
    Application.Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
        layout:'fit'
        ,border:false
        ,columns:[]
        ,stateful:false
        //,url:'process-request.php'
        //,objName:this.objName//'company'
        //,idName:this.idName//'compID'
        // {{{
        ,initComponent:function() {
            this.recordForm = this.recordForm/*new Ext.ux.grid.RecordForm({
                 title:'Row Record Editor'
                ,iconCls:'icon-edit-record'
                ,columnCount:2
                //,ignoreFields:{compID:true}
                ,readonlyFields:{action1:true}
                ,disabledFields:{qtip1:true}
                ,formConfig:{
                     labelWidth:80
                    ,buttonAlign:'right'
                    ,bodyStyle:'padding-top:10px'
                }
            });*/
    
            // create row actions
            this.rowActions = new Ext.ux.grid.RowActions({
                 actions:[{
                     iconCls:'icon-minus'
                    ,qtip:'Delete Record'
                },{
                     iconCls:'icon-edit-record'
                    ,qtip:'Edit Record'
                }]
                ,widthIntercept:Ext.isSafari ? 4 : 2
                ,id:'actions'
            });
            this.rowActions.on('action', this.onRowAction, this);
            this.columns.push(this.rowActions);//this was added to append the icon column to the end of my array.
    
            Ext.apply(this, {
                // {{{
                store:this.store,/*new Ext.data.Store({
                    reader:new Ext.data.JsonReader({
                         id:'sid'
                        ,totalProperty:'totalCount'
                        ,root:'rows'
                        ,fields:[
                             {name:'sid', type:'int'}
                            ,{name:'sit', type:'string'}
                            ,{name:'price', type:'float'}
                            ,{name:'change', type:'float'}
                            ,{name:'bres', type:'float'}
                            ,{name:'lastChange', type:'date', dateFormat:'Y-m-dTH:i:s'}
                            ,{name:'industry', type:'string'}
                            ,{name:'action1', type:'string'}
                            ,{name:'qtip1', type:'string'}
                            ,{name:'note', type:'string'}
                        ]
                    })
                    ,proxy:new Ext.data.HttpProxy({url:this.url})
                    ,baseParams:{cmd:'getData', objName:this.objName}
                    ,sortInfo:{field:'company', direction:'ASC'}
                    ,remoteSort:true
                    ,listeners:{
                        load:{scope:this, fn:function(store) {
    
                            // keep modified records accros paging
                            var modified = store.getModifiedRecords();
                            for(var i = 0; i < modified.length; i++) {
                                var r = store.getById(modified[i].id);
                                if(r) {
                                    var changes = modified[i].getChanges();
                                    for(p in changes) {
                                        if(changes.hasOwnProperty(p)) {
                                            r.set(p, changes[p]);
                                        }
                                    }
                                }
                            }
                        }}
                    }
                }),*/
                // }}}
                // {{{
                columns:this.columns //need to add this.rowActions here.
                // }}}
                ,plugins:[this.plugins, this.rowActions, this.recordForm]
                ,viewConfig:{forceFit:true}
                ,buttons:[{
                     text:'Save'
                    ,iconCls:'icon-disk'
                    ,scope:this
                    ,handler:this.commitChanges
                },{
                     text:'Reset'
                    ,iconCls:'icon-undo'
                    ,scope:this
                    ,handler:function() {
                        if(this.parentForm == null){
                            this.store.each(function(r) {
                                r.reject();
                            });
                            this.store.modified = [];
        //                    this.store.rejectChanges();
                        }else if(this.parentForm == 'amend-form'){
                            this.store.each(function(r) {
                                r.reject();
                            });
                            this.store.modified = [];
                            Ext.getCmp('amend-form').getForm().reset();
                        }
                    }
                }]
                ,tbar:[{
                     text:'Add Record'
                    ,tooltip:'Add Record to Grid'
                    ,iconCls:'icon-plus'
                    ,id:'btn-add'
                    ,listeners:{
                        click:{scope:this, fn:this.addRecord,buffer:200}
                    }
                },{
                     text:'Add Record'
                    ,tooltip:'Add Record with Form'
                    ,iconCls:'icon-form-add'
                    ,listeners:{
                        click:{scope:this, buffer:200, fn:function(btn) {
                            this.recordForm.show(this.addRecord(), btn.getEl());
                        }}
                    }
                }]
            }); // eo apply
    
            this.bbar = new Ext.PagingToolbar({
                 store:this.store
                ,displayInfo:true
                ,pageSize:20
            });
    
            // call parent
            Application.Grid1.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
        // }}}
        // {{{
        ,onRender:function() {
            // call parent
            Application.Grid1.superclass.onRender.apply(this, arguments);
    
            // load store
            this.store.load({params:{start:0,limit:11}});
    
        } // eo function onRender
        // }}}
        // {{{
        ,addRecord:function() {
            var store = this.store;
            if(store.recordType) {
                var rec = new store.recordType({newRecord:true});
                rec.fields.each(function(f) {
                    rec.data[f.name] = f.defaultValue || null;
                });
                rec.commit();
                store.add(rec);
                return rec;
            }
            return false;
        } // eo function addRecord
        // }}}
        // {{{
        ,onRowAction:function(grid, record, action, row, col) {
            switch(action) {
                case 'icon-minus':
                    this.deleteRecord(record);
                break;
    
                case 'icon-edit-record':
                    this.recordForm.show(record, grid.getView().getCell(row, col));
                break;
            }
        } // eo onRowAction
        // }}}
        // {{{
        ,commitChanges:function() {
            var records = this.store.getModifiedRecords();
            if(!records.length) {
                return;
            }
            var data = [];
            Ext.each(records, function(r, i) {
                var o = r.getChanges();
                if(r.data.newRecord) {
                    o.newRecord = true;
                }
                o[this.idName] = r.get(this.idName);
                data.push(o);
            }, this);
            var o = {
                 url:this.url
                ,method:'post'
                ,callback:this.requestCallback
                ,scope:this
                ,params:{
                     cmd:'saveData'
                    ,objName:this.objName
                    ,data:Ext.encode(data)
                }
            };
            Ext.Ajax.request(o);
        } // eo function commitChanges
        // }}}
        // {{{
        ,requestCallback:function(options, success, response) {
            if(true !== success) {
                this.showError(response.responseText);
                return;
            }
            try {
                var o = Ext.decode(response.responseText);
            }
            catch(e) {
                this.showError(response.responseText, 'Cannot decode JSON object');
                return;
            }
            if(true !== o.success) {
                this.showError(o.error || 'Unknown error');
                return;
            }
    
            switch(options.params.cmd) {
                case 'saveData':
                    var records = this.store.getModifiedRecords();
                    Ext.each(records, function(r, i) {
                        if(o.insertIds && o.insertIds[i]) {
                            r.set(this.idName, o.insertIds[i]);
                            delete(r.data.newRecord);
                        }
                    });
                    this.store.each(function(r) {
                        r.commit();
                    });
                    this.store.modified = [];
    //                this.store.commitChanges();
                break;
    
                case 'deleteData':
                break;
            }
        } // eo function requestCallback
        // }}}
        // {{{
        ,showError:function(msg, title) {
            Ext.Msg.show({
                 title:title || 'Error'
                ,msg:Ext.util.Format.ellipsis(msg, 2000)
                ,icon:Ext.Msg.ERROR
                ,buttons:Ext.Msg.OK
                ,minWidth:1200 > String(msg).length ? 360 : 600
            });
        } // eo function showError
        // }}}
        // {{{
        ,deleteRecord:function(record) {
            Ext.Msg.show({
                 title:'Delete record?'
                ,msg:'Do you really want to delete <b>' + record.get('company') + '</b><br/>There is no undo.'
                ,icon:Ext.Msg.QUESTION
                ,buttons:Ext.Msg.YESNO
                ,scope:this
                ,fn:function(response) {
                    if('yes' !== response) {
                        return;
                    }
    //                console.info('Deleting record');
                }
            });
        } // eo function deleteRecord
        // }}}
    
    }); // eo extend
    
    // register xtype
    Ext.reg('examplegrid1', Application.Grid1);
    
    // eof
    I have abstracted things out of here and into my component that passes the columns which I get on the screen.

    Code:
    Application.AmendmentDetails = function(config) {
        var config = config || {};
        var defaultConfig = {
            labelAlign : 'side',
            frame : true
        };
        Ext.apply(this, config, defaultConfig);
    
        var recFrm = new Ext.ux.grid.RecordForm({
                    title : 'Row Record Editor',
                    iconCls : 'icon-edit-record',
                    columnCount : 2,
                    ignoreFields : {
                        amID : true
                    },
                    readonlyFields : {
                        action1 : true
                    },
                    disabledFields : {
                        qtip1 : true
                    },
                    formConfig : {
                        labelWidth : 80,
                        buttonAlign : 'right',
                        bodyStyle : 'padding-top:10px'
                    }
                });
    
        var ds = new Ext.data.Store({
                    reader : new Ext.data.JsonReader({
                                id : 'amID',
                                totalProperty : 'totalCount',
                                root : 'rows',
                                fields : [{
                                            name : 'amID',
                                            type : 'int'
                                        }, {
                                            name : 'site',
                                            type : 'string'
                                        }, {
                                            name : 'pgm',
                                            type : 'string'
                                        }, {
                                            name : 'pncnt',
                                            type : 'string'
                                        }, {
                                            name : 'aftpncnt',
                                            type : 'string'
                                        }, {
                                            name : 'newtosa',
                                            type : 'string'
                                        }, {
                                            name : 'lpp',
                                            type : 'string'
                                        }, {
                                            name : 'action1',
                                            type : 'string'
                                        }, {
                                            name : 'qtip1',
                                            type : 'string'
                                        }, {
                                            name : 'expenditure',
                                            type : 'string'
                                        }, {
                                            name : 'costsavings',
                                            type : 'string'
                                        }, {
                                            name : 'costavoidance',
                                            type : 'string'
                                        }, {
                                            name : 'costavoidancermk',
                                            type : 'string'
                                        }]
                            }),
                    proxy : new Ext.data.HttpProxy({
                                url : "static/data/data10.json"
                            }),
                    baseParams : {
                        cmd : 'getData',
                        objName : this.objName
                    },
                    sortInfo : {
                        field : 'site',
                        direction : 'ASC'
                    },
                    remoteSort : true,
                    listeners : {
                        load : {
                            scope : this,
                            fn : function(store) {
    
                                // keep modified records accros paging
                                var modified = store.getModifiedRecords();
                                for (var i = 0; i < modified.length; i++) {
                                    var r = store.getById(modified[i].id);
                                    if (r) {
                                        var changes = modified[i].getChanges();
                                        for (p in changes) {
                                            if (changes.hasOwnProperty(p)) {
                                                r.set(p, changes[p]);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
        });
    
        var plugins = new Ext.ux.grid.Search({
                    iconCls : 'icon-zoom',
                    readonlyIndexes : ['lpp'],
                    disableIndexes : ['costsavings']
                });
    
        this.cm = [{
                    header : 'Site',
                    id : 'site',
                    dataIndex : 'site',
                    width : 80,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank : false
                            })
                }, {
                    header : 'Pgm',
                    dataIndex : 'pgm',
                    width : 40,
                    sortable : true,
                    //align : 'right',
                    editor : new Ext.form.TextField({
                                allowBlank : false
                            })
                }, {
                    header : 'PN Count',
                    dataIndex : 'pncnt',
                    width : 40,
                    sortable : true,
                    //align : 'right',
                    editor : new Ext.form.TextField({
                                allowBlank : false
                            })
                }, {
                    header : 'Affected PN Count',
                    dataIndex : 'aftpncnt',
                    width : 50,
                    sortable : true,
                    align : 'right',
                    editor : new Ext.form.TextField({
                                allowBlank : false
                            })
                }, {
                    header : 'New to SA',
                    dataIndex : 'newtosa',
                    width : 70,
                    sortable : true,
                    align : 'right',
                    editor : new Ext.form.TextField({
                                allowBlank : false
                            })//,
                    //renderer : Ext.util.Format.dateRenderer('n/j/Y')
                }, {
                    header : 'Last Price Paid',
                    dataIndex : 'lpp',
                    width : 75,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank: false
                            })
                }, {
                    header : 'Expenditure',
                    dataIndex : 'expenditure',
                    width : 75,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank:false
                            })
                }, {
                    header : 'Cost Savings',
                    dataIndex : 'costsavings',
                    width : 80,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank:false
                            })
                }, {
                    header : 'Cost Avoidance',
                    dataIndex : 'costavoidance',
                    width : 80,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank:false
                            })
                }, {
                    header : 'Cost Avoidance Rmk',
                    dataIndex : 'costavoidancermk',
                    width : 80,
                    sortable : true,
                    editor : new Ext.form.TextField({
                                allowBlank:false
                            })
                }]
    
        Application.user.grids.gridAmend = new Application.Grid1({
            columns : this.cm,
            store : ds,
            parentForm : 'amend-form',
            plugins : plugins,
            recordForm : recFrm,
            idName : 'amID',
            objName : 'site'
        });
    
       
        Application.AmendmentDetails.superclass.constructor.call(this, {
                    title : 'Amendment Details',
                    items : [
                            Application.user.grids.gridAmend]
                });
    }
    Ext.extend(Application.AmendmentDetails, Application.CustomPanel, {});
    
    Ext.reg('ad-panel', Application.AmendmentDetails);
    So data is getting passed and everything seems to be working almost perfect except that the columns aren't lining up. Anyway is there something inside the recordfrom.js that I need to change?

  4. #464
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Use the devel version of the plugin. 1.0 is not updated for Ext 3.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #465
    Sencha User
    Join Date
    Oct 2009
    Posts
    45
    Vote Rating
    1
    macdoug1 is on a distinguished road

      0  

    Question Where do I get that?

    Where do I get that?


    Where can I find that?

  6. #466
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Zip file on the http://recordform.extjs.eu always contains the latest (=devel) version of the plugin.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #467
    Sencha User
    Join Date
    Oct 2009
    Posts
    45
    Vote Rating
    1
    macdoug1 is on a distinguished road

      0  

    Question That is what I'm running with.

    That is what I'm running with.


    Any other ideas?

  8. #468
    Sencha User
    Join Date
    Oct 2009
    Posts
    45
    Vote Rating
    1
    macdoug1 is on a distinguished road

      0  

    Question How can I attach the rowActions to the columns?

    How can I attach the rowActions to the columns?


    I'm also trying to figure out how I can attach the rowActions to the columns. Any idea on this? My model of what I have is above.

  9. #469
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    A universal sequence is:

    1) make then unchanged downloaded example running from your server
    2) adjust it to your needs
    3) if anything stops working while adjusting, revert the last step and find out why.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  10. #470
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    581
    Vote Rating
    9
    Dumas will become famous soon enough

      0  

    Default ComboBoxes are getting rendered as Textfields

    ComboBoxes are getting rendered as Textfields


    Hi!


    I'm facing the problem that ComboBoxes are getting rendered as Textfields. I use ExtJS 3.1 and recordForm 1.0. I'm not using anything fancy at all and when I deleted all code except the core (columnModel, initComponent copied from the recordForm example,..) it still don't work. Can this have something to do with ExtJS 3.1?

    You can see how it (not) works here as well as some code:
    http://screencast.com/t/MTAxMDNhOGM

    thx
    Dumas

Thread Participants: 97

  1. franklt69 (1 Post)
  2. Wolfgang (1 Post)
  3. mystix (1 Post)
  4. cobnet (8 Posts)
  5. chiphi13 (4 Posts)
  6. mike1993 (1 Post)
  7. violinista (1 Post)
  8. hui2008 (4 Posts)
  9. AlxH (12 Posts)
  10. oracio (1 Post)
  11. CINUE (2 Posts)
  12. phpcoder (3 Posts)
  13. ostghost (2 Posts)
  14. tdikarim (4 Posts)
  15. lkasdorf (3 Posts)
  16. derf (1 Post)
  17. mjlecomte (11 Posts)
  18. farracha (1 Post)
  19. jcwatson11 (2 Posts)
  20. robin30 (8 Posts)
  21. bluesapphire (1 Post)
  22. wm003 (1 Post)
  23. divxer (1 Post)
  24. escalade (2 Posts)
  25. boonkerz (5 Posts)
  26. JamesC (2 Posts)
  27. neenhouse (5 Posts)
  28. mask_hot (18 Posts)
  29. concep86 (2 Posts)
  30. sinma (2 Posts)
  31. kai5263499 (2 Posts)
  32. jcmartinez (1 Post)
  33. trak (1 Post)
  34. amit.shukld (1 Post)
  35. hsurya (1 Post)
  36. richgoldmd (1 Post)
  37. loic (7 Posts)
  38. jimpa911 (1 Post)
  39. chalu (3 Posts)
  40. damian79 (1 Post)
  41. jimkan (6 Posts)
  42. jahong (7 Posts)
  43. winnel (1 Post)
  44. joku (1 Post)
  45. josephf (2 Posts)
  46. indrajit_bin_rahwana (4 Posts)
  47. nojutsu (2 Posts)
  48. pokerking400 (15 Posts)
  49. georgiosleon (2 Posts)
  50. snilson (2 Posts)
  51. nightowl (1 Post)
  52. gthe (1 Post)
  53. descheret (1 Post)
  54. nebbian (2 Posts)
  55. se7en.hu (1 Post)
  56. towanime (2 Posts)
  57. pravidya (4 Posts)
  58. cnagel (2 Posts)
  59. extnam01 (2 Posts)
  60. Rothariger (6 Posts)
  61. dsmaevich (1 Post)
  62. uidtest (2 Posts)
  63. savant (4 Posts)
  64. aserron (1 Post)
  65. skaue (1 Post)
  66. ielektronick (1 Post)
  67. kalpan (4 Posts)
  68. jasonb885 (2 Posts)
  69. wemerson.januario (1 Post)
  70. extjs_new (23 Posts)
  71. Dumas (24 Posts)
  72. m.natarajan (1 Post)
  73. MrEnirO (4 Posts)
  74. jove76 (2 Posts)
  75. CircleCode (3 Posts)
  76. mdimino (7 Posts)
  77. flinz (2 Posts)
  78. vince (2 Posts)
  79. jmaldini (5 Posts)
  80. mixer80 (1 Post)
  81. prox00 (1 Post)
  82. macdoug1 (14 Posts)
  83. return1.at (8 Posts)
  84. islabucasgrande (1 Post)
  85. big (1 Post)
  86. NicP (9 Posts)
  87. taron133 (1 Post)
  88. araiczyk (1 Post)
  89. adhoul (1 Post)
  90. mayurid (9 Posts)
  91. Kalpit (10 Posts)
  92. bizcatalyst (1 Post)
  93. Manuelbond007 (2 Posts)
  94. nasargus (1 Post)
  95. shahab_et (1 Post)
  96. stevwinata (5 Posts)
  97. tomdchi (2 Posts)