1. #541
    Ext User
    Join Date
    Jun 2010
    Posts
    10
    Vote Rating
    0
    Kalpit is on a distinguished road

      0  

    Default Record Form layout

    Record Form layout


    Thanks Saki for offering help. FYI, I am using ext 3.2.1 package from the extjs site. I have tried to test your code with 3.2.1 and it doesn't work and so I went on using css from your package.

  2. #542
    Ext User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    araiczyk is on a distinguished road

      0  

    Default


    Hi Saki, your work is awesome! Some questions:
    1) Where can I download the images the icons.css refers to? They are not in the zip I've downloaded.
    2) I'm using your plugin against a Json restful store and with some touchs it works fine, although when I click in "Add record" (form), the form shows but with only the labels, not the fields. I played with it a little bit and I find out that if I remove the editors from the columns, the fields shows up, but then, the fields in the grid are not editable any more, any suggestions? I'm using Ext 3.1.1.
    3) When do you estimate you will have the version that works with Ext 3?

    Thanks a lot!

  3. #543
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    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) famfamfam.com
    2) try to run my example against 3.1.1 and/or upgrade to 3.2.2
    3) soon, stay tuned.
    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


  4. #544
    Ext User
    Join Date
    Jun 2010
    Posts
    10
    Vote Rating
    0
    Kalpit is on a distinguished road

      0  

    Default Record Form layout

    Record Form layout


    Hi Saki,

    Any advice/suggestions from your side for the nested vbox hbox layout for recordform. If I change the css from extjs3.2.1 or 3.1.1 to the css used in your example, it starts working but not entirely.

    Looking forward to get some directions from you.

  5. #545
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    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


    It is on my list of completely porting it to 3.x, however, now I'm working on another extension. Anyway, a complex nested hbox/vbox will never be part of this extension as this is meant to be simple, automatic and universal so the most complexity I'll ever put in will be configurable number of columns for for fields (as it is now).

    If you're after a specific (non-universal) complex form for grid records editing then you need to write/configure it yourself.
    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


  6. #546
    Ext User
    Join Date
    May 2010
    Location
    india Bangalore
    Posts
    186
    Vote Rating
    0
    mayurid is on a distinguished road

      0  

    Default Record from not showing some text fields

    Record from not showing some text fields


    PHP Code:
    Ext.onReady(function(){
     var 
    names = [
            [
    'Product'],
            [
    'Srevice']
        ];
    function 
    saveNew(){
                    
                    var 
    field=document.getElementById('first').value;
                    var 
    types=document.getElementById('product1').value;
                    
     
    Ext.Ajax.request({
         
    url:'gl_acc.php'
         
    params: {
          
    task'update',
          
    fieldfield,
         
          
    types:types,
          
    id:0
          
    },success: function(){Ext.getCmp('grid-panel').getEl().unmask();
         
    Ext.MessageBox.alert('Add','New Record Added');
                  
    store.load({params : {start 0}});

                },
                
    failure: function(response){
                  var 
    result=response.responseText;
                  
    Ext.MessageBox.alert('error','could not connect to the database. retry later');      
                  }
          });
          }
     var 
    mySimpleStore = new Ext.data.ArrayStore({
            
    data   names,
            
    fields : ['name']});  
     
    var 
    form1 = new Ext.FormPanel({
            
    labelWidth105// label settings here cascade unless overridden
           
    height:150,
            
    frame:true,
           
            
    bodyStyle:'padding:25px 5px 30px 25px',
            
    width350,
           
    defaults: {width150},
           
    defaultType'textfield',
            
    items: [{ 
                    
    fieldLabel'Category Name',
                    
    name'first',
                    
    id:'first',
                    
    allowBlank:false
                
                
    }, new Ext.form.ComboBox({
            
    fieldLabel'Types',
        
    name "product1",
    id:'product1',
    msgTarget "qtip",
    qtip "Bitte Benutzergruppe auswählen",
    mode'local',
     
    store: new Ext.data.SimpleStore({
       
    data: [['Product'],['Service']],
      
    fields: ['Types']
    }),
    typeAheadtrue,
    displayField'Types',
    triggerAction'all'
        
    })

            ]

        });
     
     var 
    fm Ext.form;
        
    Ed Ext.grid.GridEditor;
        var 
    columnActions = new Ext.ux.grid.RowActions({
                    
    header'Actions',
                    
    id:'actions',
                    
    actions: [
                    {
                        
    iconCls'icon-edit-record',
                        
    tooltip'Edit Record'
                    
    }, 
                    {
                        
    iconCls'icon-minus',
                        
    tooltip'Reject'
                    
    }
                ]
                });
    columnActions.on({
    action:function(gridrecordactionrowcol) {

      switch(
    action) {
     case 
    'icon-minus':
     
    deleteRecord(record);
     break;
      
     case 
    'icon-edit-record':
    record_form.show(recordgrid.getView().getCell(rowcol),store);
     break;
     }}

    });
     
    var 
    record_form = new Ext.ux.grid.RecordForm({
     
    title:'Ext.ux.grid.RowRecord Example'
     
    ,iconCls:'icon-edit-record'
     
    ,columnCount:2
     
    ,formConfig:{
     
    labelWidth:80
     
    ,buttonAlign:'right'
     
    ,bodyStyle:'padding-top:10px'
     
    }
     });
     
     function 
    deleteRecord(record) {
     
    Ext.Msg.show({
     
    title:'Delete record?'
     
    ,msg:'Do you really want to delete <b>' record.get('category_name') + '</b><br/>There is no undo.'
     
    ,icon:Ext.Msg.QUESTION
     
    ,buttons:Ext.Msg.YESNO
     
     
    ,fn:function(response) {
     if(
    'yes' != response) {
     return;
     }
     
    deleterow(record); 
     }
     });
     } 
    // eo function deleteRecord

    function deleterow(record){
       
    id record.get('id');

           
    // alert(id);
             
    Ext.Ajax.request({  
                
    waitMsg'Please Wait',
                
    url'gl_acc.php'
                
    params: { 
                   
    task"delete"
                    
    id:id,
                  }, 
                
    success: function(){
                  
    store.load({params : {start 0}});

                },
                
    failure: function(response){
                  var 
    result=response.responseText;
                  
    Ext.MessageBox.alert('error','could not connect to the database. retry later');      
                  }
             });
            
      }

     var 
    cm = new Ext.grid.ColumnModel({
         
            
    defaults: {
                
    sortabletrue     
            
    },
            
    columns: [    new Ext.grid.RowNumberer(),{header:'id',dataIndex:'id',hidden:true}  ,    
                    {
                    
    header'Types',
                    
    dataIndex'types',
                    
    width:120,
                    
    editor:new Ed( new  fm.ComboBox({
                          
    mode'local',
    store: new Ext.data.SimpleStore({
       
    data: [['Product'],['Service']],
      
    fields: ['Types']
    }),
    typeAheadtrue,
    displayField'Types',
    triggerAction'all',
                        
    allowBlankfalse
                    
    }))
                } ,{
                    
    header'Category Name',
                    
    dataIndex'category_name',
                    
    width120,
                    
    editor:new Ed(new fm.TextField({

                        
    allowBlankfalse
                    
    }))
                } ,
    columnActions
            
    ]
        });
     var 
    store = new Ext.data.GroupingStore({
           
    proxy: new Ext.data.ScriptTagProxy({
                
    url:'gl_acc.php'/*+ record.get('id')*/
            
    }),   
        
    baseParams:{task"list"},
            
    reader: new Ext.data.JsonReader({
                
    root'results',
                
    totalProperty'total'
              
            
    },
            [{
    name:'id',type:'numeric'}, {name'types',type'string'},{name'category_name',type'string'}
             
               ])
            });
            
    store.load();
     var 
    grid = new Ext.grid.EditorGridPanel({
            
    storestore,
            
    cmcm,
            
    id:'grid-panel',
            
    renderTo'editor-grid',
    width'100%',
            
    height:700,
          
    plugins: [ columnActions,record_form ],
            
    title'Category Information',
            
    frametrue,
                
    tbar: [{xtype:'label',text:'types'},
                    
            {
        
    xtype'combo',
        
    fieldLabel'Types',
        
    displayField'name',
        
    mode'local',
        
    id'product',
        
    name'product',
        
    typeAheadfalse,
        
    storemySimpleStore,
        
    triggerAction'all',
        
    allowBlankfalse,
        
    width120,
        
    listeners: {
            
    select: function(comborecordindex){
                var 
    Ext.getCmp('search_field');
                
    f.store.setBaseParam('types'record.get('name'));
                
    f.store.setBaseParam('task''search');
                
    f.clear();
            }
        }
    },
    '-', {
        
    xtype'label',
        
    text'Category',
        
    style: {
            
    "margin-left""20px"
        
    }
    }, new 
    Ext.ux.form.SearchField({
        
    width130,
        
    storestore,
        
    id'search_field'
    }),'-',{
                     
    text:'Add Record'
                    
    ,tooltip:'Add Record with Form'
                    
    ,iconCls:'icon-form-add'
                    
    ,handler: function(buttonevt)

    Ext.getCmp('grid-panel').getEl().mask();


     var 
    win = new Ext.Window({
         
    // layout:'fit',
         // style:{"margin-left":"10px"},  

           
    title'Add New Category',
                    
    width350,
                    
    height:180,
                    
    closeAction:'hide',
                    
    plainfalse
                    
    itemsform1,
                    
    frame:true,
                    
    border:true,
                   
            
    buttons: [{  formBindtrue,   monitorValid:true,//disable d submit button 
                
    text'Save',  handler:function(){win.hide(); saveNew();}
            },{
                
    text'Cancel'handler:function(){win.hide();Ext.getCmp('grid-panel').getEl().unmask();

    }
            }]
     });
        
    win.show();

    }}
                ],
                
    bbar:  new Ext.PagingToolbar
                
    ({
                
    store:store,
                
    pageSize4,
                
    displayInfotrue,
                
    displayMsg'Topics {0} - {1} of {2}',
                
    emptyMsg"No topics to display"
            
                
    })
        });
      
    store.load({params : {start 0}}); // Load data  
            // store loading is asynchronous, use a load listener or callback to handle results
           
    grid.addListener("afteredit",function(oGrid_event){
                    var 
    e=oGrid_event.record;
                  
                    
    Ext.Ajax.request({
                                    
    url:'sample.php?ac=saveData&field='+oGrid_event.field+'&row='+oGrid_event.row+'&value='+oGrid_event.value//php function that saves the data
                             //  params: { date_sel:date_sel},
                                    
    success : function() {
                                            
    // alert(" Data modified successfully  !");
                                    
    },
                                    
    failure : function() {
                                            
    Ext.Msg.show({
                                                    
    title ' Error prompt  ',
                                                    
    msg ' Modify the data has errors, the operation will be rolled back  !',
                                                    
    buttons Ext.Msg.OK,
                                                    
    icon Ext.Msg.ERROR
                                            
    });
                                    }
                            });
            });
            
    });

    [
    ATTACH]21605[/ATTACH
    mayuri

  7. #547
    Ext User
    Join Date
    May 2010
    Location
    india Bangalore
    Posts
    186
    Vote Rating
    0
    mayurid is on a distinguished road

      0  

    Default ok button in record Form

    ok button in record Form


    i want the ok button in record form to save the changes i dont want to have a separate Save button in layout.

    how to do it
    mayuri

  8. #548
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    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


    How far have you got?
    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


  9. #549
    Ext User
    Join Date
    May 2010
    Location
    india Bangalore
    Posts
    186
    Vote Rating
    0
    mayurid is on a distinguished road

      0  

    Default


    "atleast tell me how to get the updated records,i am overriding the on Ok function to save changes in form"

    1.i just override the on ok function,but not able to get modified record.
    2.and one more thing,i don't want an editor in the grid,i directly want the edit icon to edit,its working fine,but i have a combo box which is not coming cause default fields are text field. how do i configure it to have a combo in form.

    please help saki...


    Code:
     Ext.override(Ext.ux.grid.RecordForm , {
        onOK:function() {
            
                updateRecord1();
            }
         
    });
    function updateRecord1() {//alert('record');
    var records =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[idName] = r.get(idName);
                data.push(o);
            });
            var o = {
                 url:gl_acc.php
                ,method:'post'
                ,params:{
                     record:record.get('id'),
                     task:'update'
                }
            };
            Ext.Ajax.request(o);
        } // eo function commitChanges

    and i tried this also
    Code:
    var records=Ext.data.Record;
           // alert(records.length);
    mayuri

  10. #550
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    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.i just override the on ok function,but not able to get modified record.
    RF always works with just one record that is saved as the instance variable, thus, you can access it as this.record.
    2. You could define combo for the column in the grid but you would set editable:false in the column config so that RF gets the editor but you cannot edit directly in the grid.
    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


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)