PDA

View Full Version : Grid Filter in IE



LuWa
27 Dec 2007, 6:08 AM
Hi.

I have a Grid Filter with a keyup-Event. I have no problems with my FF, but in any versions of the IE the filter doesn't work.

Here my grid-filter function and my addressGrid


Ext.override(Ext.form.Field, {
fireKey : function(e) {
if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
this.fireEvent('specialkey', this, e);
}
else {
this.fireEvent(e.type, this, e);
}
}
, initEvents : function() {
// this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey, this);
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.el.on("keydown", this.fireKey, this);
this.el.on("keypress", this.fireKey, this);
this.el.on("keyup", this.fireKey, this);

// reference to original value for reset
this.originalValue = this.getValue();
}
});

function gridFilter(tb, filterMenuItems, firstItem, ds)
{
var filterMenu = new Ext.menu.Menu({
id: 'filterMenu',
items: filterMenuItems
});

tb.add({
text: 'Filterfeld',
icon: 'images/find.gif',
cls: 'x-btn-text-icon',
menu: filterMenu
});

var filterlabel = tb.addDom({
tag: 'div',
id: 'filterlabel',
style: 'color:#66a6f9;width:70px;text-align:center;'
});

Ext.get('filterlabel').update('[' + firstItem + ']');


var filterField = new Ext.form.Field({
id: 'sfilter',
size: 30,
emptyText: 'Suchtext...',
selectOnFocus: true
});

tb.addField(filterField);

filterField.on('keyup', function(field, e){
var filterCol = filterMenuItems.filter(function(element, index, array) {
return element.checked;
})[0].id;

ds.filter(filterCol, filterField.getValue());
});

return tb;
}

function onFilterItemCheck(item, checked){
if(checked) {
Ext.get('filterlabel').update('[' + item.text + ']');
}
}

// grids
function loadAddressGrid()
{
var cm = new Ext.grid.ColumnModel([{
header: 'Vorname',
dataIndex: 'vorname',
width: 150,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true
//, loadMask: true
}))
}, {
header: 'Nachname',
dataIndex: 'nachname',
width: 150,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true
//, loadMask: true
}))
}, {
header: 'Firmenname',
dataIndex: 'firmenname',
width: 200,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true
//, loadMask: true
}))
}, {
dataIndex: 'options',
width: 80,
sortable: false,
resizable: false
}]);

var grid = new Ext.grid.EditorGrid('topic-grid', {
ds: AddressDatastore,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect: false}),
enableColLock: false,
//loadMask: true,
enableDragDrop: true,
trackMouseOver: true
});

// German Translation DnD
grid.getDragDropText = function(){
var sm = grid.getSelectionModel();
var s = sm.getSelections();
if(s.length == 1) {
return String.format('{0} Zeile ausgewählt', s.length);
} else {
return String.format('{0} Zeilen ausgewählt', s.length);
}
};

var update = function (gridEvent) {
Ext.Ajax.request({
url: 'inlineEditAddress.php',
params: {
id: gridEvent.row,
field: gridEvent.field,
value: gridEvent.value
},
success : function(){
AddressDatastore.load();
}
});
};

grid.on('afteredit', update, this);

// Context-Menue
grid.on('rowcontextmenu', function (grid, rowIndex, e) {
var menu = new Ext.menu.Menu({
id: 'ContextMenu',
items: [
new Ext.menu.Item({
icon: 'images/information.gif',
text: 'Adressdetails',
handler: function () {
Ext.Ajax.request({
url: 'getAdressIDbyRowIndex.php?rowIndex=' + rowIndex,
success : function(response){
loadAddressDetailGrid(response.responseText);
}
});

menu.hide();
}
}),
new Ext.menu.Item({
icon: 'images/logs.gif',
text: 'Logs',
handler: function () {
Ext.Ajax.request({
url: 'getAdressIDbyRowIndex.php?rowIndex=' + rowIndex,
success : function(response){
showLogs(response.responseText);
}
});

menu.hide();
}
}),
new Ext.menu.Item({
icon: 'images/delete.gif',
text: 'Löschen',
handler: function () {
deleteAddressByRowID(rowIndex);
menu.hide();
}
})
]
});

menu.showAt(e.getXY());
e.stopEvent();
}, this);

grid.render();
AddressDatastore.load();

// Header-Toolbar
var tb = new Ext.Toolbar(grid.getView().getHeaderPanel(true));

tb.add({
icon: 'images/add.gif',
text: 'Adresse hinzufügen',
cls: 'x-btn-text-icon',
handler: function() {
addAddress()
}
}, {
icon: 'images/csv_import.gif',
text: 'CSV importieren',
cls: 'x-btn-text-icon',
handler: function() {
csvAddressImport()
}
}, {
icon: 'images/csv_export.gif',
text: 'CSV exportieren',
cls: 'x-btn-text-icon',
handler: function() {
csvAddressExport()
}
});

// search begin //
tb.addSeparator();

var filterMenuItems = [
new Ext.menu.CheckItem({
text: 'Vorname',
checked: true,
group: 'filter',
id: 'vorname',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Nachname',
checked: false,
group: 'filter',
id: 'nachname',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Firmenname',
checked: false,
group: 'filter',
id: 'firmenname',
checkHandler: onFilterItemCheck
})
];

tb = gridFilter(tb, filterMenuItems, 'Vorname', AddressDatastore);
// search end //

// Drag Drop into Bin
tb.addSeparator();

tb.add({
id: 'trash',
icon: 'images/bin_empty.gif',
cls: 'x-btn-icon',
disabled: true
});

var myDrop = new Ext.dd.DropTarget('trash', {
dropAllowed: 'x-dd-drop-ok',
ddGroup : 'GridDD',
copy: false,
notifyDrop: function(dd, e, data) {
Ext.Msg.show({
title:'Addressen löschen',
msg: 'Addressen wirklich löschen?',
buttons: Ext.Msg.YESNO,
fn: function(btn){
if (btn == 'yes')
{
var sm = data.grid.getSelectionModel();
var rows = sm.getSelections();
for(var i = 0,lenRow = rows.length; i < lenRow; i++) {
fnDeleteAddress(rows[i].id);
}
}
}
});

AddressDatastore.reload();
}
});
}

I tried everything.. but nothing worked. I need a solution as soon as possible, so please help me.

Greetings, LuWa

LuWa
5 Jan 2008, 6:47 AM
No idea?

LuWa
16 Jan 2008, 9:36 AM
Now i know where the problem exactly is... I get an Error in the IE with my filterItems on the following marked lines:

filterField.on('keyup', function(field, e) {
/* BEGIN IE-Bug */

var filterCol = filterMenuItems.filter(function(element, index, array) {
return element.checked;
})[0].id;

/* END IE-Bug */

ds.filter(filterCol, filterField.getValue(), true);
});
The filterItems:

var filterMenuItems = [
new Ext.menu.CheckItem({
text: 'Vorname',
checked: true,
group: 'filter',
id: 'vorname',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Nachname',
checked: false,
group: 'filter',
id: 'nachname',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Firmenname',
checked: false,
group: 'filter',
id: 'firmenname',
checkHandler: onFilterItemCheck
})
];

I'm looking forward to a reply...

Greets, LuWa