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