PDA

View Full Version : [4.2.1] EXTJSIV-3316 Fix breaks grid on column move



alex.ban
15 Oct 2013, 5:47 AM
REQUIRED INFORMATIONExt version tested:

Ext 4.2.1.883

Browser versions tested against:

Chrome 30.0.1599.69
FF 24.0

DOCTYPE tested against:

html

Description:

Applying the fix for FiltersFeature restore state (http://www.sencha.com/forum/showthread.php?138377-Ext.ux.grid.FiltersFeature-cannot-restore-state&p=995331#post995331) will fix that issue and create another. Filtering a column and then moving that column will break functionality for the grid.

Steps to reproduce the problem:

(Apply the fix (http://www.sencha.com/forum/showthread.php?138377-Ext.ux.grid.FiltersFeature-cannot-restore-state&p=995331#post995331))
Apply a filter on a column
Move that column
Change filter options

The result that was expected:

Be able to choose different options

The result that occurs instead:

Cannot see options menu
Cannot see columns menu

Test Case:
Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', 'resources/js/extjs/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.ajax.JsonSimlet',
'Ext.ux.ajax.SimManager'
]);


Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'date',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'visible',
type: 'boolean'
}, {
name: 'size'
}]
});


Ext.onReady(function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', {
path: "/",
expires: new Date(new Date().getTime() + 1000*60*60*24)
}));


Ext.ux.ajax.SimManager.init({
delay: 300,
defaultSimlet: null
}).register({
'myData': {
data: [
['small', 'small'],
['medium', 'medium'],
['large', 'large'],
['extra large', 'extra large']
],
stype: 'json'
}
});


var optionsStore = Ext.create('Ext.data.Store', {
fields: ['id', 'text'],
proxy: {
type: 'ajax',
url: 'myData',
reader: 'array'
}
});


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.Store', {
// store configs
model: 'Product',
data: [
{
"id":"1",
"price":"71.72",
"company":"3m Co",
"date":"2007-09-01 00:00:00",
"size":"large",
"visible":"1"
},
{
"id":"2",
"price":"29.01",
"company":"Aloca Inc",
"date":"2007-08-01 00:00:00",
"size":"medium",
"visible":"0"
},
{
"id":"3",
"price":"83.81",
"company":"Altria Group Inc",
"date":"2007-08-03 00:00:00",
"size":"large",
"visible":"0"
},
{
"id":"4",
"price":"52.55",
"company":"American Express Company",
"date":"2008-01-04 00:00:00",
"size":"extra large",
"visible":"1"
},
{
"id":"5",
"price":"64.13",
"company":"American International Group Inc.",
"date":"2008-03-04 00:00:00",
"size":"small",
"visible":"1"
}
]
});


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 are most naturally placed in the column definition, but can also be
// added here.
filters: [{
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 createColumns = 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
}
}, {
dataIndex: 'price',
text: 'Price',
filter: {
//type: 'numeric' // specify type here or in store fields config
},
width: 70
}, {
dataIndex: 'size',
text: 'Size',
filter: {
type: 'list',
store: optionsStore
//,phpMode: true
}
}, {
dataIndex: 'date',
text: 'Date',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'visible',
text: 'Visible'
// this column's filter is defined in the filters feature config
}];


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


var grid = Ext.create('Ext.grid.Panel', {
border: false,
store: store,
stateId: 'myStatefulFiltersTest',
columns: createColumns(4),
loadMask: true,
stateful: true,
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
emptyText: 'No Matching Records'
});


// add some buttons to bottom toolbar just for demonstration purposes
grid.child('pagingtoolbar').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(createColumns(6, 4));
grid.view.refresh();
this.disable();
}
}
}
]);


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


// store.load();
});
HELPFUL INFORMATION

Error in Chrome console:
Uncaught TypeError: Cannot read property 'addCls' of null ext-all-debug-w-comments.js:44393

Gary Schlosberg
17 Oct 2013, 12:10 PM
I tried your test case out in 4.2.1 with the override, but I can't reproduce the behavior. I created this fiddle with your test case:
https://fiddle.sencha.com/#fiddle/11p

I filtered the Company column for "Group" (which filtered the results to two rows), and then moved the Company column to the right of Price. I was still able to access the filter, add to it, disable it. Perhaps I've missed something?

alex.ban
18 Oct 2013, 6:53 AM
Thank you for your reply and creating the fiddle.

I've modified your example. The override was moved at the start of the Ext.onReady.
Before, the issue could not be reproduce, nor was the FiltersFeature stateful.

Steps to reproduce:

Filter the 'Size' column
Move the column
Try to change the filter option - the options menu will not render
https://fiddle.sencha.com/#fiddle/126


(https://fiddle.sencha.com/#fiddle/126)

alex.ban
14 Nov 2013, 10:49 AM
*bump*

alex.ban
16 Jan 2014, 7:41 AM
*bump*