1. #1
    Ext User nkohari's Avatar
    Join Date
    Sep 2007
    Posts
    10
    Vote Rating
    1
    nkohari is on a distinguished road

      1  

    Lightbulb ComboBox renderer for EditorGridPanel

    ComboBox renderer for EditorGridPanel


    ComboBoxes support displaying a different value (the displayField) from each record than the value that's actually sent back when the form is posted (the valueField). When you use a ComboBox as an editor for a cell in the EditorGridPanel, there doesn't seem to be an easy way to display the "display value" in the grid, rather than the "value value".

    To solve this problem, I wrote this very simple renderer generator:

    Code:
    Ext.namespace("Ext.ux");
    Ext.ux.comboBoxRenderer = function(combo) {
      return function(value) {
        var idx = combo.store.find(combo.valueField, value);
        var rec = combo.store.getAt(idx);
        return rec.get(combo.displayField);
      };
    }
    Then, you can use it like this:

    Code:
    var store = new Ext.data.SimpleStore({
      fields: [ "value", "text" ],
      data: [
        [ "value1", "Option 1" ],
        [ "value2", "Option 2" ],
        ...
      ]
    });
    
    var combo = new Ext.form.ComboBox({
      store: store,
      valueField: "value",
      displayField: "text",
      ...
    });
    
    var gridPanel = new Ext.grid.EditorGridPanel({
      ...
      columns: [{
        editor: combo,
        renderer: Ext.ux.comboBoxRenderer(combo)
      }]
    });
    Now, the value that is displayed in the grid will match the value that the user selects from the combo box. Obviously, your combo box must define a displayField and a valueField.

    If there's an easier way to do this, please let me know.

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    1
    Vote Rating
    0
    emptyness is on a distinguished road

      0  

    Default Almost perfect.. almost...

    Almost perfect.. almost...


    Hi
    Thanx very much for your code; I was having exactly the problem you reported, in following the example on Grid Editing...
    http://extjs.com/deploy/dev/examples...edit-grid.html

    Your solution is very effective, but I have a problem.. When I request to Add a new row, using the callback implementation coming from the example above, Firebug reports the following error:

    rec has no properties
    (reported at the line -> ) return rec.get(combo.displayField);

    I made this little change to your renderer, in the point it returns from the call:

    return (rec == null ? '' : rec.get(combo.displayField) );

    I'm a newbie with Ext-js (and also with Javascript), so any hint or correction from you will be greatly appreciated!

    Thank you again

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    yeya is on a distinguished road

      0  

    Default it's works but to save changes...

    it's works but to save changes...


    well, i use something else from the edit grid screencast tutorial, and do the same and it's works for the render, but when you gonna save changes and you have more edit cell like a text cell, and you don't modified the combo , but the row is dirty, the grid displayText and not the id, but if you modified the combo the grid have the value.

    The true is i have to ask for the column, to know is the cell have a value or a text, but is another easy and direct way to doit?

    I glad for you answers.

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    radic is on a distinguished road

      0  

    Default


    Hey thank you for this short script, was searching the api all over but it seems there was no functionality for this.

    What I do notice though, that it takes a pretty long time (~2 seconds to load) and afterwards the app is a bit slow, any ideas how to improve that ? (im only using a combobox with 4 values)
    This seems to be the case with firefox only btw, IE6 does it really quick

  5. #5
    Ext User
    Join Date
    Feb 2008
    Location
    Cestas (France)
    Posts
    9
    Vote Rating
    0
    loic is on a distinguished road

      0  

    Smile


    Thanks a lot nkohari. That simply solves a problem I have.
    A possible new entry for the mjlecomte's grid faq in my opinion.

  6. #6
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    it is not working.

  7. #7
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    works..i have editorgrid on top of combo....

    so i have to say editor.field to get to combo....

    Thanks for the code....it helps.

  8. #8
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    Do you know how to add option group in the combo box? Thanks.

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Post


    You might also want to refer to my post at http://extjs.com/forum/showthread.ph...bobox+renderer.

    The major differences I found and had accounted for are:
    • When the value isn't in store, this extension will show an error.
    • As far as I know, find method on store by default matches strings starting with. If there is a value "1" and "11" and user selects the data with value "11", renderer will still return 1.

  10. #10
    Sencha User
    Join Date
    Feb 2008
    Location
    Curitiba - PR - Brasil
    Posts
    114
    Vote Rating
    0
    joao_candido is on a distinguished road

      0  

    Default


    Thank you guy !!!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar