PDA

View Full Version : GridFilter-Sample + RowEditor causes Error in IE



proesterchen
24 May 2011, 7:28 AM
Hi all,
as I had problems bringing RowEditor together with Grouping and Filtering I tried to enhance the grid-filter sample with the RowEditor.

I only added the filterfeature. Now, if I the page opens everything is fine, also the editor is working. When I reload the store manually and try to edit a row in IE, an error comes up.

A known issue? Or related to something else?

Here's the code:



Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);

/**
* @see http://www.sencha.com/forum/showthread.php?134051-4.0.1-Ext.view.View-onBeforeItemundefined-quot&p=604326
*/
Ext.override(Ext.view.View, {

processUIEvent: function(e) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
map = this.statics().EventMap,
index, record,
type = e.type,
overItem = me.mouseOverItem,
newType;

if (!item) {
if (type === 'mouseover' && me.stillOverItem(e, overItem)) {
item = overItem;
}

// Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
if (type === 'keydown') {
record = me.getSelectionModel().getLastSelected();
if (record) {
item = me.getNode(record);
}
}
}

if (item) {
index = me.indexOf(item);
if (!record) {
record = me.getRecord(item);
}

if (me.processItemEvent(record, item, index, e) === false) {
return false;
}

newType = me.isNewItemEvent(item, e);
if (newType === false || !map.hasOwnProperty(newType)) {
return false;
}

if (
(me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
(me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
(me['onItem' + map[newType]](record, item, index, e) === false)
) {
return false;
}

me.fireEvent('item' + newType, me, record, item, index, e);
}
else {
if (
(me.processContainerEvent(e) === false) ||
(me['onBeforeContainer' + map[type]](e) === false) ||
(me.fireEvent('beforecontainer' + type, me, e) === false) ||
(me['onContainer' + map[type]](e) === false)
) {
return false;
}

me.fireEvent('container' + type, me, e);
}

return true;
}
});

Ext.onReady(function(){

Ext.QuickTips.init();

// for this demo configure local and remote urls for demo purposes
var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};

// configure whether filter query is encoded or not (initially)
var encode = false;

// configure whether filtering is performed locally or remotely (initially)
var local = true;

var store = Ext.create('Ext.data.JsonStore', {
// store configs
autoDestroy: true,

proxy: {
type: 'ajax',
url: (local ? url.local : url.remote),
reader: {
type: 'json',
root: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},

remoteSort: false,
sortInfo: {
field: 'company',
direction: 'ASC'
},
pageSize: 50,
storeId: 'myStore',

fields: [
{ name: 'id' },
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'date', type: 'date', dateFormat: 'Y-m-d' },
{ name: 'visible', type: 'boolean' },
{ name: 'size' }
]
});

var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'company',
disabled: true
}, {
type: 'numeric',
dataIndex: 'price'
}, {
type: 'date',
dataIndex: 'date'
}, {
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large', 'extra large'],
phpMode: true
}, {
type: 'boolean',
dataIndex: 'visible'
}]
};

// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createHeaders = function (finish, start) {

var columns = [{
dataIndex: 'id',
text: 'Id',
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true,
width: 30
//,filter: {type: 'numeric'}
}, {
dataIndex: 'company',
text: 'Company',
id: 'company',
flex: 1,
filter: {
type: 'string'
// specify disabled to disable the filter menu
//, disabled: true
},
editor: {
xtype: 'textfield'
}
}, {
dataIndex: 'price',
text: 'Price',
filter: {
//type: 'numeric' // specify type here or in store fields config
},
width: 70
}, {
dataIndex: 'size',
text: 'Size',
filter: {
type: 'list',
options: ['small', 'medium', 'large', 'extra large']
//,phpMode: true
}
}, {
dataIndex: 'date',
text: 'Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
filter: {
//type: 'date' // specify type here or in store fields config
}
}, {
dataIndex: 'visible',
text: 'Visible',
filter: {
//type: 'boolean' // specify type here or in store fields config
}
}];

return columns.slice(start || 0, finish);
};

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

var grid = Ext.create('Ext.grid.Panel', {
border: false,
store: store,
columns: createHeaders(4),
loadMask: true,
features: [filters],
plugins: [rowEditing],
bbar: Ext.create('Ext.toolbar.Paging', {
store: store
})
});

// add some buttons to bottom toolbar just for demonstration purposes
grid.child('[dock=bottom]').add([
'->',
{
text: 'Encode: ' + (encode ? 'On' : 'Off'),
tooltip: 'Toggle Filter encoding on/off',
enableToggle: true,
handler: function (button, state) {
var encode = (grid.filters.encode !== true);
var text = 'Encode: ' + (encode ? 'On' : 'Off');
grid.filters.encode = encode;
grid.filters.reload();
button.setText(text);
}
},
{
text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
tooltip: 'Toggle Filtering between remote/local',
enableToggle: true,
handler: function (button, state) {
var local = (grid.filters.local !== true),
text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
newUrl = local ? url.local : url.remote,
store = grid.view.getStore();

// update the GridFilter setting
grid.filters.local = local;
// bind the store again so GridFilters is listening to appropriate store event
grid.filters.bindStore(store);
// update the url for the proxy
store.proxy.url = newUrl;

button.setText(text);
store.load();
}
},
{
text: 'All Filter Data',
tooltip: 'Get Filter Data for Grid',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('All Filter Data',data);
}
},{
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
},{
text: 'Add Columns',
handler: function () {
if (grid.headerCt.items.length < 6) {
grid.headerCt.add(createHeaders(6, 4));
grid.view.refresh();
this.disable();
}
}
}
]);

var win = Ext.create('Ext.Window', {
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
items: grid
}).show();

store.load();
});