PDA

View Full Version : [1.0b1] EditorGrid ComboBox / ComboBox typeAhead anomaly



mystix
2 Apr 2007, 9:58 AM
hi jack, i've a list of baffling problems for you to look at:

1a) 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>
<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
/* <----- ************ 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 [I]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 ;)

mystix
3 Apr 2007, 9:24 AM
[bump]

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

mystix
3 Apr 2007, 8:49 PM
[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... :(

bone
3 Apr 2007, 11:28 PM
[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

mystix
3 Apr 2007, 11:43 PM
Oh Founder,

we beseech thee, look at this thread... :D




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. ;)

jack.slocum
4 Apr 2007, 4:28 PM
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)

mystix
5 Apr 2007, 12:02 AM
hi jack,

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!



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.



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)



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.

mystix
10 Apr 2007, 7:28 PM
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:

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 [b]before the ComboBox's dropdown list is triggered.
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.

lxf1101
2 Sep 2009, 9:21 AM
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?

mystix
2 Sep 2009, 9:33 AM
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...)

lxf1101
2 Sep 2009, 10:44 AM
Sorry, I should have been more aware of where I was posting this question, also I did not post any details at all.
I am having the above problem with the Livegrid extension and it is extending the 2.3 editorgridpanel but I will post this question in the correct forum. I guess I was hoping for a clue when I stumbled upon this.
Thanks for your response.