PDA

View Full Version : How to get X and Y-header for the Grid panel



vinayak
1 Jul 2009, 4:51 AM
Hi

I have a requirement to get rowheaders and columnheaders for the gridpanel. Normally we have coulmnheaders for the Gridpanel but I want to get the rowheaders with coulmnheaders as well to populate the data in matrix format.

Please provide me an example ASAP.

Thanks & Regards,
Vinayak.

Animal
1 Jul 2009, 5:20 AM
That's nonsense.

Are you a spammer?

vinayak
1 Jul 2009, 5:24 AM
Hi Animal,

I know it is strange but we want to populate the Grid panel in that format as we have requirment to get the data in rowheader format.

Any help will really appriciate... Looking for some help.

Thanks in advance.

Regards,
Vinayak.

Animal
1 Jul 2009, 7:14 AM
Help with WHAT?

I'm quite sure nobody knows what you want because you have not explained.

vinayak
2 Jul 2009, 2:59 AM
Hi,

I am using filter grid panel to populate the data in column filter model. Below is the reference link for the source code.
http://extjs.com/forum/showthread.php?p=71404#post71404

On over it I want to get rowheader for the grid panel so I was trying to use ColumnLock option in the same grid panel, I want to lock the first column only which should not be unlock.

Below is the link which gaves me the ColumnLock .js

http://extjs.com/forum/showthread.php?t=17942

Also below HTML creates my Filter Grid panel.


<html>
<head>

<scripttype="text/javascript"src="ext-base.js"></script>

<!--<script type="text/javascript" src="ext-all.js"></script>-->

<scripttype="text/javascript"src="ext-all-debug.js"></script>


<scripttype="text/javascript"src="EditableItem.js"></script>

<scripttype="text/javascript"src="RangeMenu.js"></script>


<scripttype="text/javascript"src="GridFilters.js"></script>

<scripttype="text/javascript"src="Filter.js"></script>

<scripttype="text/javascript"src="StringFilter.js"></script>

<scripttype="text/javascript"src="DateFilter.js"></script>

<scripttype="text/javascript"src="ListFilter.js"></script>

<scripttype="text/javascript"src="NumericFilter.js"></script>

<scripttype="text/javascript"src="BooleanFilter.js"></script>

<linkrel="stylesheet"type="text/css"href="columnLock.css"/>

<scripttype="text/javascript"src="columnLock.js"></script>


<!--<script type="text/javascript" src="JsonResponseReader.js"></script>-->


<scripttype="text/javascript">

Ext.onReady(function(){

// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/* var xmlStore = new Ext.data.Store({




reader: new Ext.data.XmlReader({


record: 'emp'

}, [

'id', 'name', 'price', 'dateAdded', 'visible', 'size'

])

}); */

var ds =new Ext.data.GroupingStore({


url:'emp_test.xml',
reader:new Ext.data.XmlReader({


record:'emp'

},[

'id','name','price','dateAdded','visible','size'

]),


groupField:'size',

sortInfo:{field:'name', direction:'ASC'},

remoteSort:false,

});




var filters =new Ext.ux.grid.GridFilters({filters:[

{type:'numeric', dataIndex:'id'},

{type:'string', dataIndex:'name'},

{type:'numeric', dataIndex:'price'},

{type:'date', dataIndex:'dateAdded'},

{

type:'list',
dataIndex:'size',
options:['extra small','small','medium','large','extra large'],

phpMode:false},

{type:'boolean', dataIndex:'visible'}

]});


var cm =new Ext.grid.ColumnModel([

{

dataIndex:'id',

header:'Id',

locked:true,

id:'Id'

},{

dataIndex:'name',

header:'Name',

locked:true,


},{

dataIndex:'price',

header:'Price'

},{

dataIndex:'dateAdded',

header:'Date Added'

},{

dataIndex:'size',

header:'Size'

},{

dataIndex:'visible',

header:'Visible'

}]);

cm.defaultSortable =true;


var grid =new Ext.grid.LockingGridPanel({

id:'example',

ds: ds,

cm: cm,

enableColLock:true,


stripeRows:true,

loadMask:true,

view:new Ext.grid.GroupingView(),

plugins: filters,

height:400,

width:700,


el:'grid-example',


bbar:new Ext.PagingToolbar({

store: ds,

pageSize:5,

plugins: filters
})

});


grid.render();


ds.load({start:0, limit:5});

//grid.getSelectionModel().selectFirstRow();

});

</script>


<styletype="text/css"title="currentStyle"media="screen">

@import"ext-all.css";

@import"style.css";

</style>
</head>


<body>

<h1>ExtJS Filter Grid Example</h1>

<divid="grid-example"style="margin: 10px;"></div>
</body>
</html>

Please help me to resolve the problem atleast which gaves me first column lock option.

Waiting for your reply.

Regards,
Vinayak.

Condor
2 Jul 2009, 3:14 AM
Please post READABLE code in [ CODE ] tags!


<html>
<head>
<script type="text/javascript" src="ext-base.js"></script>
<!--<script type="text/javascript" src="ext-all.js"></script>-->
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="EditableItem.js"></script>
<script type="text/javascript" src="RangeMenu.js"></script>
<script type="text/javascript" src="GridFilters.js"></script>
<script type="text/javascript" src="Filter.js"></script>
<script type="text/javascript" src="StringFilter.js"></script>
<script type="text/javascript" src="DateFilter.js"></script>
<script type="text/javascript" src="ListFilter.js"></script>
<script type="text/javascript" src="NumericFilter.js"></script>
<script type="text/javascript" src="BooleanFilter.js"></script>
<link rel="stylesheet" type="text/css" href="columnLock.css" />
<script type="text/javascript" src="columnLock.js"></script>
<!--<script type="text/javascript" src="JsonResponseReader.js"></script>-->
<script type="text/javascript">
Ext.onReady(function() { // Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/*var xmlStore = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record: 'emp'
},
['id', 'name', 'price', 'dateAdded', 'visible', 'size'])
});*/
var ds = new Ext.data.GroupingStore({
url: 'emp_test.xml',
reader: new
Ext.data.XmlReader({
record: 'emp'
},
['id', 'name', 'price', 'dateAdded', 'visible', 'size']),
groupField: 'size',
sortInfo: {
field: 'name',
direction: 'ASC'
},
remoteSort: false,
});
var filters = new Ext.ux.grid.GridFilters({
filters: [{
type: 'numeric',
dataIndex: 'id'
},{
type: 'string',
dataIndex: 'name'
},{
type: 'numeric',
dataIndex: 'price'
},{
type: 'date',
dataIndex: 'dateAdded'
},{
type: 'list',
dataIndex: 'size',
options: ['extra small', 'small', 'medium', 'large', 'extra large'],
phpMode: false
},{
type: 'boolean',
dataIndex: 'visible'
}]
});
var cm = new Ext.grid.ColumnModel([{
dataIndex: 'id',
header: 'Id',
locked: true,
id: 'Id'
},{
dataIndex: 'name',
header: 'Name',
locked: true,
},{
dataIndex: 'price',
header: 'Price'
},{
dataIndex: 'dateAdded',
header: 'Date Added'
},{
dataIndex: 'size',
header: 'Size'
},{
dataIndex: 'visible',
header: 'Visible'
}]);
cm.defaultSortable = true;
var grid = new Ext.grid.LockingGridPanel({
id: 'example',
ds: ds,
cm: cm,
enableColLock: true,
stripeRows: true,
loadMask: true,
view: new
Ext.grid.GroupingView(),
plugins: filters,
height: 400,
width: 700,
el: 'grid-example',
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 5,
plugins: filters
})
});
grid.render();
ds.load({
start: 0,
limit: 5
});
//grid.getSelectionModel().selectFirstRow();
});
</script>
<style type="text/css" title="currentStyle" media="screen">
@import"ext-all.css";
@import"style.css";
</style>
</head>
<body>
<h1>ExtJS Filter Grid Example</h1>
<divid="grid-example"style="margin:10px;"></div>
</body>
</html>

ps. You should include columnLock.css after ext-all.css.

vinayak
2 Jul 2009, 3:34 AM
Thnaks Condor for the quick reply.. Below is the HTML code by including the columnLock.css before ext-all.css but still getting the same problem.


<html>
<head>



<scripttype="text/javascript"src="ext-base.js"></script>

<scripttype="text/javascript"src="ext-all.js"></script>

<scripttype="text/javascript"src="ext-all-debug.js"></script>


<scripttype="text/javascript"src="EditableItem.js"></script>

<scripttype="text/javascript"src="RangeMenu.js"></script>


<scripttype="text/javascript"src="GridFilters.js"></script>

<scripttype="text/javascript"src="Filter.js"></script>

<scripttype="text/javascript"src="StringFilter.js"></script>

<scripttype="text/javascript"src="DateFilter.js"></script>

<scripttype="text/javascript"src="ListFilter.js"></script>

<scripttype="text/javascript"src="NumericFilter.js"></script>

<scripttype="text/javascript"src="BooleanFilter.js"></script>


<scripttype="text/javascript"src="columnLock.js"></script>


<!--<script type="text/javascript" src="JsonResponseReader.js"></script>-->


<scripttype="text/javascript">

Ext.onReady(function(){

// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/* var xmlStore = new Ext.data.Store({




reader: new Ext.data.XmlReader({


record: 'emp'

}, [

'id', 'name', 'price', 'dateAdded', 'visible', 'size'

])

}); */

var ds =new Ext.data.GroupingStore({


url:'emp_test.xml',
reader:new Ext.data.XmlReader({


record:'emp'

},[

'id','name','price','dateAdded','visible','size'

]),


groupField:'size',

sortInfo:{field:'name', direction:'ASC'},

remoteSort:false,

});




var filters =new Ext.ux.grid.GridFilters({filters:[

{type:'numeric', dataIndex:'id'},

{type:'string', dataIndex:'name'},

{type:'numeric', dataIndex:'price'},

{type:'date', dataIndex:'dateAdded'},

{

type:'list',
dataIndex:'size',
options:['extra small','small','medium','large','extra large'],

phpMode:false},

{type:'boolean', dataIndex:'visible'}

]});


var cm =new Ext.grid.ColumnModel([

{

dataIndex:'id',

header:'Id',

locked:true,

id:'Id'

},{

dataIndex:'name',

header:'Name',

locked:true,


},{

dataIndex:'price',

header:'Price'

},{

dataIndex:'dateAdded',

header:'Date Added'

},{

dataIndex:'size',

header:'Size'

},{

dataIndex:'visible',

header:'Visible'

}]);

cm.defaultSortable =true;


var grid =new Ext.grid.LockingGridPanel({

id:'example',

ds: ds,

cm: cm,

enableColLock:true,


stripeRows:true,

loadMask:true,

view:new Ext.grid.GroupingView(),

plugins: filters,

height:400,

width:700,


el:'grid-example',


bbar:new Ext.PagingToolbar({

store: ds,

pageSize:5,

plugins: filters
})

});


grid.render();


ds.load({start:0, limit:5});

//grid.getSelectionModel().selectFirstRow();

});

</script>


<styletype="text/css"title="currentStyle"media="screen">

@import"ext-all.css";

@import"columnLock.css";

@import"style.css";

</style>
</head>


<body>

<h1>ExtJS Filter Grid Example</h1>

<divid="grid-example"style="margin: 10px;"></div>
</body>
</html>


Please help me..

Waiting for your reply.

Regards,
Vinayak.

Condor
2 Jul 2009, 6:56 AM
AGAIN: Please post READABLE code in
... tags!!!

vinayak
2 Jul 2009, 7:01 AM
Below is the code. Please help me.

<html>
<head>
<scripttype="text/javascript"src="ext-base.js"></script>
<scripttype="text/javascript"src="ext-all.js"></script>
<scripttype="text/javascript"src="ext-all-debug.js"></script>

<scripttype="text/javascript"src="EditableItem.js"></script>
<scripttype="text/javascript"src="RangeMenu.js"></script>

<scripttype="text/javascript"src="GridFilters.js"></script>
<scripttype="text/javascript"src="Filter.js"></script>
<scripttype="text/javascript"src="StringFilter.js"></script>
<scripttype="text/javascript"src="DateFilter.js"></script>
<scripttype="text/javascript"src="ListFilter.js"></script>
<scripttype="text/javascript"src="NumericFilter.js"></script>
<scripttype="text/javascript"src="BooleanFilter.js"></script>

<scripttype="text/javascript"src="columnLock.js"></script>

<!--<script type="text/javascript" src="JsonResponseReader.js"></script>-->

<scripttype="text/javascript">
Ext
.onReady(function(){
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/* var xmlStore = new Ext.data.Store({
reader: new Ext.data.XmlReader({

record: 'emp'
}, [
'id', 'name', 'price', 'dateAdded', 'visible', 'size'
])
}); */
var ds =new Ext.data.GroupingStore({

url
:'emp_test.xml',
reader:new Ext.data.XmlReader({

record
:'emp'
},[
'id','name','price','dateAdded','visible','size'
]),

groupField
:'size',
sortInfo
:{field:'name', direction:'ASC'},
remoteSort
:false,
});
var filters =new Ext.ux.grid.GridFilters({filters:[
{type:'numeric', dataIndex:'id'},
{type:'string', dataIndex:'name'},
{type:'numeric', dataIndex:'price'},
{type:'date', dataIndex:'dateAdded'},
{
type
:'list',
dataIndex:'size',
options:['extra small','small','medium','large','extra large'],
phpMode
:false},
{type:'boolean', dataIndex:'visible'}
]});

var cm =new Ext.grid.ColumnModel([
{
dataIndex
:'id',
header
:'Id',
locked
:true,
id
:'Id'
},{
dataIndex
:'name',
header
:'Name',
locked
:true,

},{
dataIndex
:'price',
header
:'Price'
},{
dataIndex
:'dateAdded',
header
:'Date Added'
},{
dataIndex
:'size',
header
:'Size'
},{
dataIndex
:'visible',
header
:'Visible'
}]);
cm
.defaultSortable =true;

var grid =new Ext.grid.LockingGridPanel({
id
:'example',
ds
: ds,
cm
: cm,
enableColLock
:true,

stripeRows
:true,
loadMask
:true,
view
:new Ext.grid.GroupingView(),
plugins
: filters,
height
:400,
width
:700,

el
:'grid-example',

bbar
:new Ext.PagingToolbar({
store
: ds,
pageSize
:5,
plugins
: filters
})
});

grid
.render();

ds
.load({start:0, limit:5});
//grid.getSelectionModel().selectFirstRow();
});
</script>

<styletype="text/css"title="currentStyle"media="screen">
@import"ext-all.css";
@import"columnLock.css";
@import"style.css";
</style>
</head>

<
body>
<h1>ExtJS Filter Grid Example</h1>
<divid="grid-example"style="margin:10px;"></div>
</body>
</html>

mjlecomte
3 Jul 2009, 8:11 PM
That's finally in code tags, but it's not readable. Is that how your code looks in your editor?

vinayak
5 Jul 2009, 10:22 PM
Thanks for the reply. From below code I am able to get the first column lock option enabled but when I was trying to use "Group by field" option with column lock option then coumn lock option got disabled . Please suggest how to get only first column locked and group by field option for other column.

Below is javascript I am using.




Ext.onReady(function(){

var store = new Ext.data.GroupingStore({

reader: new Ext.data.XmlReader({

// record: 'emp'
}, [
'property', 'value1', 'value2'
]),
groupField: 'value1',
sortInfo: {field: 'value1', direction: 'ASC'},
remoteSort: false
});

var loadCount = 2;
var loadStore = function(){
// wait for 2 stores to load
if(--loadCount){
return;
}

// Only use first record of both stores
var r1 = store1.getAt(0);
var r2 = store2.getAt(0);

// Iterate over all fields
store1.fields.each(function(f){
// Add new record to store
var r = new store.recordType({
property: f.name,
value1: r1.get(f.name),
value2: r2.get(f.name)
},r);
store.add(r);

});
alert("Inside loadStore");
};

alert("hi 1");

// store for first table
var store1 = new Ext.data.Store({

url: 'emp4.xml',
reader: new Ext.data.XmlReader({

record: 'emp'
}, [
'fname', 'lname', 'age', 'salary', 'city', 'pinCode'
]),
autoLoad: true,
listeners: {
load: loadStore
}

});


// store for second table
var store2 = new Ext.data.Store({
url: 'emp6.xml',
reader: new Ext.data.XmlReader({

record: 'emp'
}, [
'fname', 'lname', 'age', 'salary', 'city', 'pinCode'
]),
autoLoad: true,
listeners: {
load: loadStore
}
});

var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'string', dataIndex: 'property'},
{type: 'string', dataIndex: 'value1'},
{type: 'string', dataIndex: 'value2'}

]});

var grid = new Ext.grid.LockingGridPanel({
ds: store,
columns: [
{header: "Property", width: 150, dataIndex: 'property', sortable: true, locked: true,id: 'property'},
{header: "File 1", width: 150, dataIndex: 'value1', sortable: true},
{header: "File 2", width: 150, dataIndex: 'value2', sortable: true,renderer: function(v, meta, r){
// add a css class if values are different
if(v != r.get('value1')){
meta.css = 'red-css-class';
}
return v;
}}
],
plugins: filters,
renderTo:'content',
width:400,
height:250,
stripeRows: true,
collapsed: true,
collapsible: true,
// view: new Ext.grid.GroupingView(),
enableColLock: false,

loadMask: true,
title: 'Employee Information',
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 1,
plugins: filters
})

});

});




Thanks in advance.

Regards,
Vinayak.