in firebug show this error
grid.headerCt is undefined
grid.headerCt.on("columnresize", this.resizeFilterField, this);
my FilterRow.js
Code:
Ext.namespace('Ext.ux.grid');
Ext.define('Ext.ux.grid.FilterRow', {
extend:'Ext.util.Observable',
init: function(grid) {
this.grid = grid;
this.applyTemplate();
// when Ext grid state restored (untested)
grid.on("staterestore", this.resetFilterRow, this);
// when column width programmatically changed
grid.headerCt.on("columnresize", this.resizeFilterField, this);
grid.headerCt.on("columnmove", this.resetFilterRow, this);
grid.headerCt.on("columnshow", this.resetFilterRow, this);
grid.headerCt.on("columnhide", this.resetFilterRow, this);
grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, this);
},
applyTemplate: function() {
var searchItems = [];
this.eachColumn( function(col) {
var filterDivId = this.getFilterDivId(col.id);
if (!col.xfilterField) {
if(col.nofilter || col.isCheckerHd != undefined) {
col.xfilter = { };
} else if(!col.xfilter){
col.xfilter = { };
col.xfilter.xtype = 'textfield';
}
col.xfilter = Ext.apply({
id:filterDivId,
hidden:col.hidden,
xtype:'component',
baseCls: "xfilter-row",
width:col.width-2,
enableKeyEvents:true,
style:{
margin:'1px 1px 1px 1px'
},
hideLabel:true
}, col.xfilter);
col.xfilterField = Ext.ComponentManager.create(col.xfilter);
} else {
if(col.hidden != col.xfilterField.hidden) {
col.xfilterField.setVisible(!col.hidden);
}
}
if(col.xfilterField.xtype == 'combo') {
col.xfilterField.on("select", this.onSelect, this);
} else if(col.xfilterField.xtype == 'datefield') {
col.xfilterField.on("change", this.onChange, this);
}
col.xfilterField.on("keydown", this.onKeyDown, this);
searchItems.push(col.xfilterField);
});
if(searchItems.length > 0) {
this.grid.addDocked(this.dockedFilter = Ext.create('Ext.container.Container', {
id:this.grid.id+'docked-filter',
weight: 100,
dock: 'top',
border: false,
baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
items:searchItems,
layout:{
type: 'hbox'
}
}));
}
},
onSelect: function(field, value, option) {
if(!this.onChangeTask) {
this.onChangeTask = new Ext.util.DelayedTask(function(){
this.storeSearch();
}, this);
}
this.onChangeTask.delay(1000);
},
onChange: function(field, newValue, oldValue) {
if(!this.onChangeTask) {
this.onChangeTask = new Ext.util.DelayedTask(function(){
this.storeSearch();
}, this);
}
this.onChangeTask.delay(1000);
},
onKeyDown: function(field, e) {
if(e.getKey() == e.ENTER) {
this.storeSearch();
}
},
getSearchValues: function() {
/*var values = {};
this.eachColumn( function(col) {
if(col.xfilterField && col.xfilterField.xtype != 'component') {
values[col.dataIndex] = col.xfilterField.getValue();
}
});
return values;*/
var values = {};
this.eachColumn( function(col) {
// CHANGE: only send populated fields
if (col.xfilterField.getValue() != '') {
if(col.xfilterField && col.xfilterField.xtype != 'component') {
values[col.dataIndex] = col.xfilterField.getValue();
}
}
});
// CHANGE: converted to JSON to send 1 param
return Ext.JSON.encode(values);
},
// CHANGE: need to clear all fields on reset
clearSearchValues: function() {
this.eachColumn( function(col) {
if(col.xfilterField && col.xfilterField.xtype != 'component') {
col.xfilterField.setValue('');
}
});
},
storeSearch: function() {
/*if(!this.grid.store.proxy.extraParams) {
this.grid.store.proxy.extraParams = {};
}
this.grid.store.proxy.extraParams.search = this.getSearchValues();
this.grid.store.currentPage = 1;
this.grid.store.load();*/
if(!this.grid.store.proxy.extraParams) {
this.grid.store.proxy.extraParams = {};
}
// CHANGE: create member for parse
this.grid.store.proxy.extraParams.filters = '{"fields":'+this.getSearchValues()+'}';
this.grid.store.currentPage = 1;
this.grid.store.load();
},
resetFilterRow: function () {
/*this.grid.removeDocked(this.grid.id+'docked-filter', true);
delete this.dockedFilter;
//This is because of the reconfigure
var dockedFilter = document.getElementById(this.grid.id+'docked-filter');
if (dockedFilter) {
dockedFilter.parentNode.removeChild(dockedFilter);
}
this.applyTemplate();*/
var dockedFilter = document.getElementById(this.grid.id + 'docked-filter');
if (dockedFilter) {
this.eachColumn(function (col) {
var filterDivId = this.getFilterDivId(col.id);
if (col.hidden != col.xfilterField.hidden) {
col.xfilterField.setVisible(!col.hidden);
}
});
}
},
resizeFilterField: function (headerCt, column, newColumnWidth) {
var editor;
if (!column.xfilterField) {
//This is because of the reconfigure
this.resetFilterRow();
editor = this.grid.headerCt.items.findBy(function (item) { return item.dataIndex == column.dataIndex; }).xfilterField;
} else {
editor = column.xfilterField;
}
if(editor) {
editor.setWidth(newColumnWidth - 2);
}
},
scrollFilterField:function(e, target) {
var width = this.grid.headerCt.el.dom.firstChild.style.width;
this.dockedFilter.el.dom.firstChild.style.width = width;
this.dockedFilter.el.dom.scrollLeft = target.scrollLeft;
},
// Returns HTML ID of element containing filter div
getFilterDivId: function(columnId) {
return this.grid.id + '-filter-' + columnId;
},
// Iterates over each column that has filter
eachFilterColumn: function(func) {
this.eachColumn( function(col, i) {
if (col.xfilterField) {
func.call(this, col, i);
}
});
},
// Iterates over each column in column config array
eachColumn: function(func) {
Ext.each(this.grid.columns, func, this);
}
});
my grid
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-4.0.2a/examples/shared/example.css" />
<script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.0.2a/examples/ux/grid/FilterRow.js"></script>
<style>
.x-grid-cell-topic b {
display: block;
}
.x-grid-cell-topic .x-grid-cell-inner {
white-space: normal;
}
.x-grid-cell-topic a {
color: #385F95;
text-decoration: none;
}
.x-grid-cell-topic a:hover {
text-decoration:underline;
}
.x-grid-cell-topic .x-grid-cell-innerf {
padding: 5px;
}
.x-grid-rowbody {
padding: 0 5px 5px 5px;
}
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
.xfilter-row {
position:absolute !important;
}
.xfilter-row input {
font-size: 11px !important;
background: #FFFFFF url(ext-4.0.2a/examples/ux/grid/images/filter-row-icon.png) no-repeat bottom left !important;
padding: 0 5px 0 16px !important;
}
</style>
<script>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.window.Window',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function(){
Ext.define('UserDet', {
extend: 'Ext.data.Model',
fields: [ 'user_id', 'firstname', 'lastname', 'address'],
idProperty: 'user_id'
});
var store = new Ext.data.Store({
pageSize: 10,
model: 'UserDet',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'extjsgrid.php',
actionMethods : 'POST',
reader: {
type: 'json',
root: 'results',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
listeners: {
'beforeload': function(store, options) {
store.proxy.extraParams.sort='user_id';
store.proxy.extraParams.dir='DESC';
store.proxy.extraParams.start='0';
store.proxy.extraParams.limit='10';
store.proxy.extraParams.page='1';
}
}
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: '100%',
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
columnLines: true,
resizable:true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
columns: [
{
locked : true,
id: 'user_id',
text: "User Id",
dataIndex: 'user_id',
sortable: false,
width: 100
},{
text: "First Name",
dataIndex: 'firstname',
width: 100,
sortable: true
},{
text: "Last Name",
dataIndex: 'lastname',
width: 100,
sortable: true
},{
text: "Address",
dataIndex: 'address',
width: 100,
sortable: true
}
],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
plugins: [ Ext.create('Ext.ux.grid.FilterRow') ],
title: 'User Details',
renderTo: 'grid-user',
viewConfig: {
stripeRows: true
}
});
store.loadPage(1);
var window = Ext.create('Ext.Window',{
frame: false,
width: 960,
height: 400,
constrainHeader:true,
minimizable:true,
maximizable:true,
x: 232,
y: 180,
layout: {
type: 'fit',
align: 'center'
},
resizable: false,
items: [{
items: [grid]
}]
});
window.show();
});
</script>
</head>
<body>
<div style="padding:0px 0px 20px 0px;overflow: auto;width:980px;height:500px;">
<div id="grid-user"></div>
</div>
</body>
</html>
anybody give suggestion?
Reply With Quote
