PDA

View Full Version : Locking The First Row, Or Add a text box To Header



prijithkr
26 Jun 2012, 7:25 PM
I am trying to Implement a Row Header Filter and I have done it using cellEditing, but the problem is that the Row is not locked and it gets sorted too, can you please provide me any way to lock my first row,

Else is it possible to add textbox inside a header... any renderer for headers??

scottmartin
27 Jun 2012, 10:40 AM
You might be interested in these threads:
http://www.sencha.com/forum/showthread.php?152923
http://www.sencha.com/forum/showthread.php?150918

Scott.

prijithkr
27 Jun 2012, 8:09 PM
Happy to know that they have a GridHeader Plugin for EXT 4.1 too
But i am still facing problem in including it to the code, i tried implementing it in a basic code, still i get an exception

I think i am missing something in including the plug in....

This is my app.js file




Ext.Loader.setConfig({enabled:true});
JPMC = Ext.create("Ext.app.Application",{
name: '123',
appFolder: 'app',
launch: function() {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: [new Ext.ux.grid.GridHeaderFilters()],
columns: [
{ header: 'Name', dataIndex: 'name', filter: {xtype:"textfield", filterName:"Name"} },
{ header: 'Email', dataIndex: 'email', flex: 1,filter: {xtype:"textfield", filterName:"Email"} },
{ header: 'Phone', dataIndex: 'phone', filter: {xtype:"textfield", filterName:"Phone"} }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}

});



I have also copy pasted the GridHeaderFilter.js inside the src/ux/grid folder and included it in my HTML file too




<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs-4.1/resources/css/ext-all.css">

<script type="text/javascript" src="extjs-4.1/ext-all.js"></script>
<script type="text/javascript" src="extjs-4.1/src/ux/grid/GridHeaderFilters.js"></script>
<script type="text/javascript" src="app.js"></script>




</head>
<body>
</body>
</html>




But still i get an Object expected error, Am I missing something in including the plug in or am I doing anything extra? Please help me, I am very new to EXTJS,

scottmartin
28 Jun 2012, 3:33 PM
Please try the following:



Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var gridHeaderFilters = Ext.create('Ext.ux.grid.HeaderFilters', {
// set any properties here
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: [gridHeaderFilters],
columns: [{
header: 'Name',
dataIndex: 'name',
filter: {
xtype: "textfield",
filterName: "Name"
}
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
filter: {
xtype: "textfield",
filterName: "Email"
}
}, {
header: 'Phone',
dataIndex: 'phone',
filter: {
xtype: "textfield",
filterName: "Phone"
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

});


Scott.

prijithkr
28 Jun 2012, 9:10 PM
Thanks Scott!! it worked... but the textbox appeared, but its not filtering... dnt know why? i have just copy pasted the code mentioned above

Should i write any extra code for filtering?

prijithkr
28 Jun 2012, 10:24 PM
The filter bar appeared, but filtering doesnt work.... I am getting an Exception called this.el is null or not an object in ext-all.js

it filters only if i sort any particular column, by clicking on its column header.... any IDEA??

scottmartin
29 Jun 2012, 5:07 AM
The filtering is handled by sending parameter to your server (see your headers). Your server code should then use these params to build your SQL for your return data.

Scott.

prijithkr
29 Jun 2012, 6:20 PM
So why does it work after i sort a column, what difference does that make?



The filtering is handled by sending parameter to your server (see your headers). Your server code should then use these params to build your SQL for your return data.

Scott.

prijithkr
29 Jun 2012, 6:29 PM
Or is there anyway to manually sort a column, without clicking on the header, so that i can call it after the rendering of the grid?

scottmartin
30 Jun 2012, 5:46 AM
I would suspect there is a bug. I can verify that when working in local mode, that you have to apply sorting to the field for it to work properly when you hit enter.

I would load the code in FireBug/Developer Tools (Chrome) and

Check out applyFilters() and see what is going wrong. The keypress for enter takes you to
onFilterContainerEnter() that leads you to applyFilters

Scott.