Results 1 to 8 of 8

Thread: RowEditor example...

  1. #1

    Default RowEditor example...

    Hi, I've tried to modify the roweditor example based on another datagrid I was working on.
    now nothing displays at all (i started with the actual roweditor example) and I'm getting "grid.getColumnModel() is undefined" ... Not sure why, I'm specifying columns: cm in the grid object.

    Here's the sample javascript code i'm workign on:

    /*!
    * contactRowEditor....
    */

    Ext.util.Format.comboRenderer = function(combo){
    return function(value){
    var record = combo.findRecord(combo.valueField, value);
    return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
    }


    Ext.onReady(function(){
    Ext.QuickTips.init();

    var fm = Ext.form;


    var Contact = Ext.data.Record.create([
    {name: 'Internal_Contact', type: 'int'},
    {name: 'Contact', type: 'string'},
    {name: 'Status' },
    {name: 'Salutation', type: 'string' }, //-fixme- NOT yet implemented.
    {name: 'First_Name', type: 'string'},
    {name: 'Middle_Initials', type: 'string'},
    {name: 'Last_Name', type: 'string'},
    {name: 'Nick_Name', type: 'string'},
    {name: 'Title', type: 'string'},
    {name: 'Gender', type: 'string'}
    ]);


    var store = new Ext.data.GroupingStore({
    reader: new Ext.data.JsonReader({fields: Contact}),
    proxy: new Ext.data.HttpProxy({url: 'ejsGridAjax.jsp?action=contactsearch_json'}),

    sortInfo: {field: 'Internal_Contact', direction: 'ASC'}
    });

    var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Update'
    });

    var statusCombo = new fm.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    transform:'lstatus',
    lazyRender: true,
    mode: 'local',
    valueNotFoundText: 'Value not found!',
    listClass: 'x-combo-status-small',
    forceSelection: true

    });

    var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {
    id: 'Internal_Contact',
    header: 'Internal_Contact',
    dataIndex: 'Internal_Contact',
    width: 220,
    editor: new fm.TextField({
    allowBlank: false
    }),
    hidden: true
    },
    {
    id: 'Contact',
    header: 'Contact',
    dataIndex: 'Contact',
    width: 220,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }
    },
    {
    header: 'Status',
    dataIndex: 'Status',
    width: 130,
    editor: statusCombo,
    renderer: Ext.util.Format.comboRenderer(statusCombo) // pass combo instance to reusable renderer
    },
    {
    header: 'First',
    dataIndex: 'First_Name',
    width: 220,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }

    },
    {
    header: 'Middle',
    dataIndex: 'Middle_Initials',
    width: 50,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }

    },
    {
    header: 'Last',
    dataIndex: 'Last_Name',
    width: 220,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }

    },
    {
    header: 'Nick Name',
    dataIndex: 'Nick_Name',
    width: 64,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }

    },
    {
    header: 'Title',
    dataIndex: 'Title',
    width: 50,
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }

    },
    {
    header: 'Gender',
    dataIndex: 'Gender',
    width: 130,
    editor: new fm.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    transform:'lgender',
    lazyRender: true,
    listClass: 'x-combo-gender-small'
    })
    }
    ]);

    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
    store: store,
    width: 600,
    region:'center',
    margins: '0 5 5 5',
    autoExpandColumn: 'First_Name',
    plugins: [editor],
    view: new Ext.grid.GroupingView({
    markDirty: false
    }),
    tbar: [{
    iconCls: 'icon-user-add',
    text: 'Add Contact',
    handler: function(){

    // Add Contact...
    }
    },{
    ref: '../removeBtn',
    iconCls: 'icon-user-delete',
    text: 'Remove Contact',
    disabled: true,
    handler: function(){
    editor.stopEditing();
    var s = grid.getSelectionModel().getSelections();
    for(var i = 0, r; r = s[i]; i++){
    store.remove(r);
    }
    }
    }],

    columns: cm
    });

    var layout = new Ext.Panel({
    title: 'Contacts',
    layout: 'border',
    layoutConfig: {
    columns: 1
    },
    renderTo: 'editor-grid',

    width:600,
    height: 600,
    items: [grid]
    });
    layout.render(Ext.getBody());

    grid.getSelectionModel().on('selectionchange', function(sm){
    grid.removeBtn.setDisabled(sm.getCount() < 1);
    });
    });



    As you can see, I'm just trying to do a basic JsonStore with a custom ColumnModel, the hardest thing here is probably the ComboBox... I've got the custom renderer in there that I stole from the docs... It's just erroring and I'm not sure why now.

    Any help would be greatly appreciated, I'm trying to get some prototypes working for my company -- might actually have a reason to buy extjs if they work well enough... Just... so much to these APIs

    Thanks
    -Ryan

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    please edit your post and use codeboxes, if you want any help.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2009
    Location
    Switzerland
    Posts
    83

    Default

    You should use
    Code:
    cm: cm
    instead of

    Code:
    columns: cm
    Patrick

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    As already said, post in code tags so someone can read that code.

    Also suggest making the posted code smaller, just post something that shows the problem at hand, not everything else you have working.

  5. #5

    Default roweditor problems

    Hello, I posted before, here is the new code reposted.

    I changed 'columns' to 'cm' and now the layout widget renders but nothing else renders yet.
    Also I noticed store.load() was missing so I added that...

    Still, endless problems that I can't figure out:

    Code:
    /*!
     * contactRowEditor....
     */
    
        Ext.util.Format.comboRenderer = function(combo){
            return function(value){
                var record = combo.findRecord(combo.valueField, value);
                return record ? record.get(combo.displayField) : combo.valueNotFoundText;
            }
        }
        
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        var fm = Ext.form;
        
        var Contact = Ext.data.Record.create([
                                               {name: 'Internal_Contact', type: 'int'},
                                            {name: 'Contact', type: 'string'},
                                            {name: 'Status' },
                                          //  {name: 'Salutation', type: 'string' }, //-fixme- NOT yet implemented.
                                            {name: 'First_Name', type: 'string'},
                                            {name: 'Middle_Initials', type: 'string'},
                                            {name: 'Last_Name', type: 'string'},
                                            {name: 'Nick_Name', type: 'string'},
                                            {name: 'Title', type: 'string'},
                                            {name: 'Gender', type: 'string'}
                                              ]);
    
    
        var store = new Ext.data.GroupingStore({
            reader: new Ext.data.JsonReader({fields: Contact}),
            proxy: new Ext.data.HttpProxy({url: 'ejsGridAjax.jsp?action=contactsearch_json'}),
    
            sortInfo: {field: 'Internal_Contact', direction: 'ASC'}
        });
        
        
        
        var editor = new Ext.ux.grid.RowEditor({
            saveText: 'Update'
        });
    
        var statusCombo = new fm.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            transform:'lstatus',
            lazyRender: true,
            mode: 'local',
            valueNotFoundText: 'Value not found!',
            listClass: 'x-combo-status-small',
            forceSelection: true
           
        });
    
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),                                   
        {
           id: 'Internal_Contact',
           header: 'Internal_Contact',
           dataIndex: 'Internal_Contact',
           width: 220,
           editor: new fm.TextField({
               allowBlank: false
           }),
           hidden: true
        },
        {
            id: 'Contact',
            header: 'Contact',
            dataIndex: 'Contact',
            width: 220,
            editor: {
             xtype: 'textfield',
             allowBlank: false
            }
         },
         {
             header: 'Status',
             dataIndex: 'Status',
             width: 130,
             editor: statusCombo,
             renderer: Ext.util.Format.comboRenderer(statusCombo) // pass combo instance to reusable renderer
          },    
        {
            header: 'First',
            dataIndex: 'First_Name',
            width: 220,
            editor: {
                xtype: 'textfield',
                allowBlank: false
               }
    
         },
         {
             header: 'Middle',
             dataIndex: 'Middle_Initials',
             width: 50,
             editor: {
             xtype: 'textfield',
             allowBlank: false
            }
    
         },
          {
              header: 'Last',
              dataIndex: 'Last_Name',
              width: 220,
              editor: {
             xtype: 'textfield',
             allowBlank: false
            }
    
          },
           {
               header: 'Nick Name',
               dataIndex: 'Nick_Name',
               width: 64,
               editor: {
              xtype: 'textfield',
              allowBlank: false
             }
    
           },
            {
                header: 'Title',
                dataIndex: 'Title',
                width: 50,
                editor: {
                   xtype: 'textfield',
                   allowBlank: false
                  }
    
            },
             {
                 header: 'Gender',
                 dataIndex: 'Gender',
                 width: 130,
                 editor: new fm.ComboBox({
                     typeAhead: true,
                     triggerAction: 'all',
                     transform:'lgender',
                     lazyRender: true,
                     listClass: 'x-combo-gender-small'
                  })
              }
    ]);
    
        cm.defaultSortable = true;
    
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            width: 600,
            //height: 600,
            
            region:'center',
            margins: '0 5 5 5',
            
            autoExpandColumn: 'First_Name',
            renderTo: 'editor-grid',
            plugins: [editor],
            
            view: new Ext.grid.GroupingView({
                markDirty: false
            }),
            tbar: [{
                iconCls: 'icon-user-add',
                text: 'Add Contact',
                handler: function(){
                
                    // Add Contact...
                }
            },{
                ref: '../removeBtn',
                iconCls: 'icon-user-delete',
                text: 'Remove Contact',
                disabled: true,
                handler: function(){
                    editor.stopEditing();
                    var s = grid.getSelectionModel().getSelections();
                    for(var i = 0, r; r = s[i]; i++){
                        store.remove(r);
                    }
                }
            }],    
    
            cm: cm    
        });
    
        
        var layout = new Ext.Panel({
            title: 'Contacts',
            layout: 'border',
            layoutConfig: {
                columns: 1
            },
            //renderTo: 'editor-grid',
    
            width:600,
            height: 600,
            items: [grid]
        });
        layout.render(Ext.getBody());
        
    
        grid.getSelectionModel().on('selectionchange', function(sm){
            grid.removeBtn.setDisabled(sm.getCount() < 1);
        });
        
        store.load();
    });
    Sorry, formatting got kind of screwed up. Btw, as someone coming from absolutely no prior vBulletin experience, i had no idea that code and /code was the right syntax... It wasn't even mentioned in the FAQ from what I saw.

    Anyway, this s till isn't doing much, anyone have any ideas/suggestions?

  6. #6

    Default Also...

    The reason I didn't trim down the amount of code is because I really don't know what IS and ISN'T working... Extjs doesn't provide a lot of diagnostic notification when a user does something stupid, so I really have almost no way of figuring this out

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Quote Originally Posted by rbastic View Post
    Hello, Sorry, formatting got kind of screwed up. Btw, as someone coming from absolutely no prior vBulletin experience, i had no idea that code and /code was the right syntax... It wasn't even mentioned in the FAQ from what I saw.
    http://extjs.com/learn/Ext_Forum_Hel..._code_properly

    Follow that and it will help you improve what you post.

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Is this your first grid more or less?

    If so I would not make this your first grid using renderer, roweditor, etc.

    Have you looked at the Grid FAQ? It has a section for debugging steps to go through when having problems with grids (for example adding a load and exception listener to your store to see which one fires).

    Post new code in new posts as you update your code based on forum help.

Posting Permissions

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