Results 1 to 7 of 7

Thread: Row editable grid view

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    78

    Default Row editable grid view

    How to create editable Row as well as add or delete a row in a grid view?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Check out the examples. There is a plugin for the row editing and also examples of how to use the ActionColumn.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    78

    Default

    Thanks Mitchell for the reply.

    I had checked out this example :
    http://docs.sencha.com/ext-js/4-0/#!...w-editing.html
    and want to create something like this but it seems to be in Ext JS 4.0. Is similar plugin also available in ver 3.1 too?

    I tried in version 3.1 using the following code. It adds a new record but fails to edit. The error message that it gives is " grid.startEditing is not a function" . Could plz help me in resolving this?
    Code:
     var sm= new Ext.grid.RowSelectionModel({singleSelect:false});
        var grid = new Ext.grid.GridPanel({
           renderTo:Ext.getBody(),
          store: store,
          autoHeight: true,
          title:'Editable grid',
           frame:true,
         height:300,  
          width:500, 
        clicksToEdit: 1,
         columnLines: true,
            sm: sm,
         
      cm: new Ext.grid.ColumnModel({
            columns:[
       
                { header: "Rec",   dataIndex: "record_id" },
                { header: "col_1",   dataIndex: "col_1"},
                { header: "col_2",   dataIndex: "col_2"}
            ]
      }),
            viewConfig: {
                forceFit:true
            },
           
            // inline buttons
            buttons: [{text:'Save'},{text:'Cancel'}],
            buttonAlign:'center',
            // inline toolbars
            tbar:[{
                text:'Add Something',
                tooltip:'Add a new row',
                iconCls:'add',
       handler: function() {
                    var Record= grid.getStore().recordType;
                    var p = new Record({
                        record_id:0,
                       col_1:"1 ",
                       col_2:" 2"
                    });
                    grid.stopEditing();
                    var newRow = store.getCount();
                    p.data.isNew = true;
                    store.insert(newRow, p);
                    grid.startEditing(newRow, 0);
        
                }
            }]
     
        });

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    78

    Default

    Hi,
    Thanks for the link. I tried to implement it in simple form. However, no data was rendered with error message "this.config[a] is undefined "
    Code:
    script type="text/javascript" src="roweditor.js"></script>  
        <script type="text/javascript"> 
    Ext.onReady(function(){
        
    var data= [
         [2297,2589,274],
         [4922,7143,543642],
         [5470,10063,59]
        ];
    
            var store = new Ext.data.ArrayStore({  
      fields: [
       { name: "record_id",  type: "int"     },
       { name: "col_1",     type: "int"       },
       { name: "col_2",    type: "string"       }
       
       ],
       data:data
        });  
        
       
        var editor = new Ext.ux.grid.RowEditor({
            saveText: 'Update'
        });
        var grid = new Ext.grid.GridPanel({
            store: store,
            width: 600,
            region:'center',
            margins: '0 5 5 5',
            autoExpandColumn: 'name',
            plugins: [editor],
            view: new Ext.grid.GroupingView({
                markDirty: false
            }),
            tbar: [{
                iconCls: 'icon-user-add',
                text: 'Add Employee',
                handler: function(){
       var Record= grid.getStore().recordType;
                       var e = new Record({
                       record_id:0,
         col_1:"1 ",
         col_2:" 2"
                    });
                    editor.stopEditing();
                    store.insert(0, e);
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(0);
                    editor.startEditing(0);
                }
      
           
            }],
            columns: [
            new Ext.grid.RowNumberer(),
      {
                id: 'rec',
                header: 'Record',
                dataIndex: 'record_id',
                width: 220,
                sortable: true,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }},
         {
                id: 'col1',
                header: 'Clolumn 1',
                dataIndex: 'col_1',
                width: 220,
                sortable: true,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
       
       },
        {
                id: 'col2',
                header: 'Clolumn 2',
                dataIndex: 'col_2',
                width: 220,
                sortable: true,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
       
       }
      
      
      
           ]
        });
    
        var layout = new Ext.Panel({
            title: 'Record',
            layout: 'border',
            layoutConfig: {
                columns: 1
            },
            width:600,
            height: 600,
            items: [ grid]
        });
        layout.render(Ext.getBody());
        
    });
       
    </script>
    Can plz help me in finding out where did I go wrong?

    Thanks in advance.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Tried using Ext.grid.EditorGridPanel?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    78

    Default

    Hi Mitchell,
    I tried but it didn't work
    Is there any other changes that I have to make in my code?

    Thanks in advance.

Posting Permissions

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