PDA

View Full Version : Problem running Ext JS 4 Grid Filtering example - grid-filter-local.js



simonr25
2 Jan 2012, 9:34 AM
Hello,
I have copied the Grid Filtering example - grid-filter-local.js -
in to a local file and made 0 changes - apart from the urls, which
are referencing actions in a controller.
The grid is correctly displayed but when I select a menu item
to see the filter option, the following message/stack trace is
obtained:


Uncaught TypeError: object is not a function
Ext.define.addFilterFiltersFeature.js:577
Ext.define.addFiltersFiltersFeature.js:595
Ext.define.createFiltersFiltersFeature.js:285
Ext.define.onMenuCreateFiltersFeature.js:298
fireext-all-debug.js:10658
Ext.define.continueFireEventext-all-debug.js:13854
Ext.define.fireEventext-all-debug.js:13834
Ext.define.getMenuext-all-debug.js:80080
Ext.define.showMenuByext-all-debug.js:80008
Ext.define.onHeaderTriggerClickext-all-debug.js:80003
Ext.define.onElClickext-all-debug.js:80769
(anonymous function)
wrapext-all-debug.js:11088




I tried to use this feature prior to running the example and
was obtaining the same error.


Would you know why this is?


kind regards...

mitchellsimoens
2 Jan 2012, 9:57 AM
Did you include the filters feature? It's not part of the framework.

simonr25
2 Jan 2012, 10:22 AM
Hello,
Thank you for your reply.


The code seems to fail within FiltersFeature.js:577 (I've made the stack trace clearer as below).


Uncaught TypeError: object is not a function FiltersFeature.js:577
Ext.define.addFilter FiltersFeature.js:577
Ext.define.addFilters FiltersFeature.js:595
Ext.define.createFilters FiltersFeature.js:285
Ext.define.onMenuCreate FiltersFeature.js:298
fire ext-all-debug.js:10658
Ext.define.continueFireEvent ext-all-debug.js:13854
Ext.define.fireEvent ext-all-debug.js:13834
Ext.define.getMenu ext-all-debug.js:80080
Ext.define.showMenuBy ext-all-debug.js:80008
Ext.define.onHeaderTriggerClick ext-all-debug.js:80003
Ext.define.onElClick ext-all-debug.js:80769
(anonymous function)
wrap ext-all-debug.js:11088


The exact code I'm using is below also:
An example of data returned from the controller is: { "success": true, "total": 1, "data": {"id":1,"company":"Ed","price":4,"size":"small","date":"01/01/2012","visible":true}}



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


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.QuickTips.init();


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


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

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


var store = Ext.create('Ext.data.JsonStore', {
// store configs
autoDestroy: true,
model: 'Product',
proxy: {
type: 'ajax',
url: (local ? url.local : url.remote),
reader: {
type: 'json',
root: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},
remoteSort: false,
sorters: [{
property: 'company',
direction: 'ASC'
}],
pageSize: 50
});


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',
options: ['small', 'medium', 'large', 'extra large']
//,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,
columns: createColumns(4),
loadMask: true,
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
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(createColumns(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();
});

simonr25
2 Jan 2012, 11:05 AM
Hello,
I resolved this particular error by including the FiltersFeature dependencies.

I am not sure why I needed to do? this since I included the following:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../extjs/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);

...
<script type="text/javascript" src="/public/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/menu/ListMenu.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/menu/RangeMenu.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="/public/extjs/examples/ux/grid/FiltersFeature.js"></script>
...