1. #1
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default [1.0b1] EditorGrid & ComboBox anomalies

    [1.0b1] EditorGrid & ComboBox anomalies


    hi jack, i've a list of baffling problems for you to look at:

    1a) [In an EditorGrid] when using MemoryProxy and JsonReader, and with typeAhead: true, the suggestion in the ComboBox always defaults to the first entry, and no filtering occurs. Am i doing something wrong, or is this a bug? Attached below is a test case:
    HTML Code:
    <html>
    <head>
      <title>EditorGrid ComboBox / ComboBox Bug</title>
      <link rel='stylesheet' href='ext-all.css'>
      <style>
        .search-result {font-family:Courier;font-size:10px;}
      </style>
    
      <script src='yui-utilities.js'></script>
      <script src='ext-yui-adapter.js'></script>
      <script src='ext-all-debug.js'></script>
      <script>
        Ext.onReady(function() {
          var colours = {
            colour:[
              {id: 1, code: 'RED', name: 'RED'},
              {id: 2, code: 'ORA', name: 'ORANGE'},
              {id: 3, code: 'YEL', name: 'YELLOW'},
              {id: 4, code: 'GRE', name: 'GREEN'},
              {id: 5, code: 'BLU', name: 'BLUE'},
              {id: 6, code: 'IND', name: 'INDIGO'},
              {id: 7, code: 'VIO', name: 'VIOLET'}
            ]
          };
    
          var countries = {
            country:[
              {id: 1, code: 'YEL', name: 'YELLOW', country: 'THAILAND'},
              {id: 2, code: 'VIO', name: 'VIOLET', country: 'HONGKONG'},
              {id: 3, code: 'IND', name: 'INDIGO', country: 'ITALY'},
              {id: 4, code: 'RED', name: 'RED', country: 'SPAIN'},
              {id: 5, code: 'BLU', name: 'BLUE', country: 'HELLENIC REPUBLIC'},
              {id: 6, code: 'ORA', name: 'ORANGE', country: 'GERMANY'},
              {id: 7, code: 'GRE', name: 'GREEN', country: 'PAPUA NEW GUINEA'}
            ]
          };
          
          var colourComboBox = new Ext.form.ComboBox({ // create ComboBox
            store: new Ext.data.Store({ // create ComboBox DataStore
              proxy: new Ext.data.MemoryProxy(colours),
              reader: new Ext.data.JsonReader({
                root: 'colour',
                id: 'id'
              }, Ext.data.Record.create([
                {name: 'code', type: 'string'},
                {name: 'name', type: 'string'}
              ]))
            }),
            typeAhead: true,
            displayField: 'name', // field to be displayed once selection has been made
            valueField: 'code', // field to search by (should match EditorGrid's target DataStore dataIndex)
            forceSelection: true,
            width: 200,
            listWidth: 300,
            minChars: 1,
            queryDelay: 100,
            selectOnFocus: true,
            triggerAction: 'all',
            emptyText: 'Select a colour...',
            tpl: new Ext.Template('<div class="search-result">({code}) {name}</div>')
          });
          
          //*  <----- ************ remove the first '/' to test the <input> field scenario
          var ColourRecord = Ext.data.Record.create([ // create Colour Record
            {name: 'code', type: 'string'},
            {name: 'name', type: 'string'},
            {name: 'country', type: 'string'}
          ]);
    
          var ds = new Ext.data.Store({ // create EditorGrid DataStore
            proxy: new Ext.data.MemoryProxy(countries),
            reader: new Ext.data.JsonReader({
              root: 'country',
              id: 'id'
            }, ColourRecord)
          });
          
          ds.on('update', function(e, rec, act) { // datasource, record, action
            if (act == Ext.data.Record.REJECT) {
              // find the correct record from the colour ComboBox using 'code' as the key
              // then set the Colour column to display the name instead of the code
              rec.data['name'] = colourComboBox.findRecord('code', rec.data['code']).data['name'];
            }
          }, this);
    
          var cm = new Ext.grid.ColumnModel([ // create EditorGrid ColumnModel
            {header: 'Colour', dataIndex: 'code', editor: new Ext.grid.GridEditor(colourComboBox), renderer: function(value, p, record) {
              return record.data['name']; // display name, but store code instead
            }, width: 100},
            {header: 'Country', dataIndex: 'country', width: 200}
          ]);
          cm.defaultSortable = true;
          
          var grid = new Ext.grid.EditorGrid('editor-grid', { // create EditorGrid
            ds: ds,
            cm: cm,
            enableColLock: false
          });
          
          grid.on('validateedit', function(e) {
            if (e.field == 'code') {
              e.record.data['name'] = colourComboBox.getRawValue();
            }
          }, this);
    
          grid.on('afteredit', function(e) {
            console.log(e.record.data['code']); // check record to see if data is correct
          }, this);
          
          var layout = Ext.BorderLayout.create({ // create GridPanel
            center: {
              panels: [new Ext.GridPanel(grid)]
            }
          }, 'grid-panel');
          grid.enableCtxMenu = false; // disable header context menu
          grid.render();
    
          var gridFoot = grid.getView().getFooterPanel(true); // get grid footer and show it
          var gridFootToolbar = new Ext.Toolbar(gridFoot, [{ // create toolbar in grid footer
            text: 'Add colour',
            handler: function() {
              var c = new ColourRecord({
                code: '',
                name: '',
                country: ''
              });
              grid.stopEditing();
              ds.add(c);
              grid.startEditing(ds.getCount() - 1, 0);
            }
          }]);
          ds.load(); // load data
    
          Ext.fly('resetBtn').on('click', function() {
            grid.getDataSource().rejectChanges();
          });
          /*/
          colourComboBox.applyTo('test-combo');
          //*/
        });
      </script>
    </head>
    <body>
    <div id='grid-panel' style='width:600px;height:110px;'>
      <div id='editor-grid'></div>
    </div>
    <br/>
    <input type='button' id='resetBtn' value='Reset'>
    <br/>
    <input type='text' id='test-combo'/>
    </body>
    </html>
    1b) [In an <input> field] To test the converted <input> field scenario, simply remove the first / on line 63, like so
    HTML Code:
    /*  <----- ************ remove the first '/' to test the <input> field scenario
    var ds = new Ext.data.Store({ // create EditorGrid DataStore
    .
    .
    .
    [EDIT]
    (note: the sample above uses jack's recommendation taken from http://extjs.com/forum/showthread.php?t=3145)

    found some additional bugs (tested on FireFox 2.0.0.3 and IE6):
    2) [pre-beta1 bug, present in 1.0b1] using the example grid above, double click on the Colour column to commence editing, click the ComboBox arrow to trigger the dropdown list, then click on the country column -- the ComboBox continues to remain in edit mode.

    3) [another pre-beta1 bug, present in 1.0b1] using the example grid above, when the ComboBox dropdown list is displayed, a mouse-wheel scroll through a long grid doesn't collapse the dropdown list.

    4) on initial render, the Colour column shows the name, while double-clicking a cell in the Colour column will display the code; this is correct because displayField = 'name' while valueField = 'code'. Now perform the following: double click a cell in the Colour column, click the ComboBox arrow to display the dropdown, click anywhere outside the grid to cancel the edit, then double click the same cell again -- instead of displaying the valueField's value, the displayField's value is displayed. Double-clicking other cells in the same column will reveal that they too have been affected.

    5) if the MemoryProxy in the test code above is replaced with a HttpProxy (with the appropriate XHR setup of course), bug no. (4) also occurs

    6) Click once on any cell in the Colour column, press Enter and immediately press the up arrow key on your keyboard -- the ComboBox remains in edit mode, and the only way to cancel the edit is to single click on the problem cell (you might have to try a few times to see this bug). It seems like key capturing after an edit commences is happening too slowly.

    7) Calling rejectChanges() on the EditorGrid's DataSource fire's the DataSource's "update" event, which in turn updates the GridView, which calls the custom renderers in the EditorGrid, but somehow the custom rendered column Colour is not updated. To test this, click the Reset button in the example above after changing the value of any cell in the Colour column, and observe that the valueField has been reset while the displayField remains as the last selected value. (solved: added an "update" listener to the grid's datasource to handle rejectChanges())

    [EDIT]
    8) When clicking the "Add Colour" button, a new blank row is correctly added to the end of the grid, BUT 2 anomalies also occur: a) the grid footer expands, and b) the grid header disappears. This happens when the initial defined height for the grid-panel results in a vertical scrollbar, AND the grid's <div> has no explicit height defined, AND we add new rows to the end of the grid instead of the beginning. If the initial defined height for the grid-panel <div> is increased from 110px to 200px so that no vertical scrollbar appears on initial grid render, OR we explicitly give the grid's <div> the same height as it's container grid-panel, OR we add new rows to the top of the grid instead of the bottom, then no such problem occurs.
    (However, if you look carefully at the grid, it is vertically offset by about 1-2px from the bottom of the gridpanel. I tried adding more grids in gridpanels on the same page, and it seems to always occur for the first grid within a gridpanel on the page)

    9) the emptyText doesn't get displayed for Colour name column when adding new rows

    p.s. 1 suggestion for this souped up forum --- line numbering on code blocks would be great
    Last edited by mystix; 4 Apr 2007 at 8:37 AM. Reason: pardon me... made some stupid copy paste errors...

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    [bump]

    errr... should i post this in the Ext 1.0 Beta Discussion forum, or in this Bug forum?

  3. #3
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    [bump]
    anyone know how to change the thread's title? think i'm getting missed here cos my title isn't indicative of the bugs...

  4. #4
    Ext Premium Member
    Join Date
    Mar 2007
    Location
    Norway
    Posts
    196
    Vote Rating
    2
    bone is on a distinguished road

      0  

    Default


    Quote Originally Posted by mystix View Post
    [bump]
    anyone know how to change the thread's title? think i'm getting missed here cos my title isn't indicative of the bugs...
    I think you have to go through the advanced editor or wth
    Founder of the Path of Exticism

  5. #5
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Oh Founder,

    we beseech thee, look at this thread...




    advanced editor doesn't allow title changes, so i had to resort to option 2. hehe.
    p.s. bone, if you have the time, could you back me up on those bugs / anomalies i listed above? thanks.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    1) Put the combo into local mode for client side filtering. mode:'local'

    2) This is known issue that currently has no work around. Luckily all you have to do is click on something (or key) and it ends edit mode. This would actually actually the correct behavior (the click should be ignored) but the problem is related to the event not making it's way back.

    3) Fixed in the next rev

    4 & 5) These 2 are confusing. It should always display the displayField (not the valueField). Can you clarify?

    6. Should be fixed next rev

    8. I haven't actually set up your code. Can you replicate it in the editor grid example? Also, if you attach a zip that I can unpack into the grid example directory, it would help a bunch.

    9. emptyText is for the combo and doesn't apply to grid rows? (this was another one that confused me)
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  7. #7
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    hi jack,
    Quote Originally Posted by jack.slocum View Post
    2) This is known issue that currently has no work around. Luckily all you have to do is click on something (or key) and it ends edit mode. This would actually actually the correct behavior (the click should be ignored) but the problem is related to the event not making it's way back.

    3) Fixed in the next rev

    6. Should be fixed next rev
    thanks!


    Quote Originally Posted by jack.slocum View Post
    4 & 5) These 2 are confusing. It should always display the displayField (not the valueField). Can you clarify?
    in your suggested example @ http://extjs.com/forum/showthread.php?t=3145 (when displayField != valueField), upon clicking the arrow, the ComboBox shows the valueField instead of the displayField; once the dropdown list is displayed, this bug disappears and the ComboBox correctly displays the displayField. Also, setting mode: 'local' causes the ComboBox to stop functioning. [EDIT] attached this test-case as combo-bug.html; simply drop the html file into the examples folder.


    Quote Originally Posted by jack.slocum View Post
    9. emptyText is for the combo and doesn't apply to grid rows? (this was another one that confused me)
    does this mean emptyText is solely for combos which aren't in grids? (p.s. i tried adding emptyText for combos in toolbars and they work fine)


    Quote Originally Posted by jack.slocum View Post
    8. I haven't actually set up your code. Can you replicate it in the editor grid example? Also, if you attach a zip that I can unpack into the grid example directory, it would help a bunch.
    oki doki. i've attached a test-case adapted from your current grid-editor example for this bug which you can drop directly into the examples folder. i added some comments in CAPS to both the html and js files to indicate the portions of code which will affect the output. [EDIT]Using the test-case, only FF2 is affected. IE6 behaves.
    Attached Files

  8. #8
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    [bump]

    p.s. regarding (4) & (5), after re-reading my post, i realised my explanation wasn't clear at all...

    hopefully the following explanation will help to clear things up:
    1. in the example above, press enter to commence an edit in the Colour column -- the ComboBox displays the code field from the Country DataStore (and not the ComboBox's own displayField value). this happens before the ComboBox's dropdown list is triggered.
    2. once the ComboBox's dropdown list is triggered, selecting a value from the dropdown list will correctly return both the Colour code (valueField) and name (displayField). this time round, the ComboBox correctly displays it's own displayField. (press Enter to end the edit, then press Enter again on the same field to confirm this)

    i think the ComboBox currently doesn't check it's store for the existence of the value in the field it is currently modifying when the edit commences. IMHO, if we consider ComboBoxes as highly evolved <select> fields, then the value of the field being edited should always exist in the ComboBox's DataStore, and the ComboBox should trigger a quickfind of the value in it's Store in order to correctly obtain and display the field's corresponding displayField value when the edit commences.

  9. #9
    Ext User
    Join Date
    Jun 2009
    Posts
    4
    Vote Rating
    0
    lxf1101 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jack.slocum View Post

    6. Should be fixed next rev
    I Stumbled across this post whilst trying to fix the same problem as the origianl posts point # 6.
    Have the latest Extjs and am having the same problem.
    When I start to type and select the combobox selection that is left, then click outside the cell and scroll down, all the other values in the same row dissapear unless they are of the same value.
    When I click into the problem cell and select a value the grid start to display correctly.

    Did this ever get resolved?

  10. #10
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    it's been almost 2 years since i posted that...

    try the editorgridpanel from the 2.3.0 download.
    (1.x has long been defunct...)