Tweet
I am using Version 3.1.20120430.0, with ExtJS 4.0.7 (no chance of upgrading right now).
I am attempting to write an app that uses the Grid filter feature where the user can click on a column and specify a filter for that column. I'm currently trying to make a basic grid app that allows the user to filter locally. However, I am getting the following error when I click on the column:
Here is my code:
I used the example for 4.0.7 (http://dev.sencha.com/deploy/ext-4.0...ter-local.html). As a warning, their example is nothing like mine. I just tried to find lines of code that I needed and implanted the code into mine.
I am attempting to write an app that uses the Grid filter feature where the user can click on a column and specify a filter for that column. I'm currently trying to make a basic grid app that allows the user to filter locally. However, I am getting the following error when I click on the column:
Code:
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
Ext.util.Event.Ext.extend.fire ext-all.js:15
Ext.define.continueFireEvent ext-all.js:15
Ext.define.fireEvent ext-all.js:15
Ext.define.getMenu ext-all.js:15
Ext.define.showMenuBy ext-all.js:15
Ext.define.onHeaderTriggerClick ext-all.js:15
Ext.define.onElClick ext-all.js:15
(anonymous function) VM2740:6c
c ext-all.js:15
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2012 CNX Corporation, All Rights Reserved">
<title>Valence Examples - Grids - Editor Grid - Save On Demand</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/extjs4/examples/ux/grid/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="/extjs4/examples/ux/grid/css/RangeMenu.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/extjs4/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="/extjs4/examples/ux/grid/TransformGrid.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/extjs4/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('priceExceptionModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'COMPY'},
{name: 'CUSTNO'},
{name: 'CUSTBR'},
{name: 'POOL'},
{name: 'PARTNO'},
{name: 'LOCATE'},
{name: 'PRICECAT'}
]
});
var priceExceptionDataStore = Ext.create('Ext.data.Store', {
model: 'priceExceptionModel',
autoLoad : true,
remoteSort: true,
pageSize: 25,
sortInfo: {
field: 'CUSTNO',
direction: 'ASC'
},
proxy : {
type : 'ajax',
url : 'vvcall.pgm',
extraParams: {
pgm: 'PRCEXCMNT',
action: 'getExceptionRecords'
},
reader : {
type : 'json',
root : 'prcexcgrid',
totalProperty : 'totalCount'
}
},
listeners : {
beforeload : function () {
// load any extra parameters to filter data
// special logic for sorting
if ( this.sorters && this.sorters.items && this.sorters.items.length > 0 ) {
this.getProxy().extraParams.dir = this.sorters.items[0].direction;
this.getProxy().extraParams.sort = this.sorters.items[0].property;
}
}
}
});
var formatDate = function(inDate) {
var d = new Date();
var returnValue = ' ';
if (inDate == '0001-01-01' || inDate == '1940-01-01') {
return;
} else {
d = Ext.Date.parse(inDate, 'Y-m-d');
returnValue = Ext.util.Format.date(d, 'm/d/Y');
return returnValue;
}
};
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var priceExceptionGrid = Ext.create('Ext.grid.Panel', {
region: 'center',
title: 'Price Exception Mass Maintenance',
store: priceExceptionDataStore,
autoScroll: true,
loadMask: true,
stripeRows: true,
columns: [{
header: "<b>Company</b>",
sortable: false,
filterable: true,
draggable: false,
width: 100,
dataIndex: 'COMPY',
filter: {
type: 'list',
options: ['1','2']
}
},{
header: "<b>Customer Number</b>",
sortable: false,
filterable: true,
draggable: false,
width: 125,
dataIndex: 'CUSTNO'
},{
header: "<b>Branch</b>",
sortable: false,
filterable: true,
draggable: false,
width: 60,
dataIndex: 'CUSTBR'
},{
header: "<b>Pool</b>",
sortable: true,
draggable: false,
width: 95,
dataIndex: 'POOL'
},{
header: "<b>Part Number</b>",
sortable: false,
draggable: false,
width: 105,
dataIndex: 'PARTNO'
},{
header: "<b>Location</b>",
sortable: true,
draggable: false,
width: 125,
dataIndex: 'LOCATE'
},{
header: "<b>Price Category</b>",
sortable: false,
draggable: false,
width: 125,
dataIndex: 'PRICECAT'
}],
listeners: {
itemdblclick: function(grid, record, item, rowIndex, columnIndex, e) {
Ext.Msg.alert('Edit Record','Edit record feature not available yet');
}
},
features: [filters],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'add',
handler: function(btn) {
console.log('add button was pressed');
}
}]
},{
xtype: 'pagingtoolbar',
plugins: [new Valence.plugin.PagingToolbarSlider()],
store: priceExceptionDataStore, // same store GridPanel is using
pageSize: 25,
dock: 'bottom',
displayInfo: true
}]
});
// viewport
new Ext.Viewport({
layout: 'border',
items: [priceExceptionGrid]
});
});
</script>
</head>
<body>
</body>
</html>
Comment