PDA

View Full Version : GridPanel Row Click



catapult
5 Aug 2009, 1:54 AM
Hi all,

I'm fairly new to extjs and have created a GridPanel linking to our database. What I would like to happen is when a row in the grid is clicked it gets the case ID from the first column in the row and passes it to my external script (basically navigates to a page outside of any extjs control). This page then shows the full case history details for that case ID. My grid is just a case register and is readonly.

This is my code:

Ext.onReady(function() {
Ext.QuickTips.init();

var recordLimit=15;

// Create our datastore
var QuotesStore = new Ext.data.JsonStore({
url : 'database.php',
root : 'results',
totalProperty : 'total',
fields : [
{name: 'ID', type: 'int', mapping: 'ID'},
{name: 'Name', type: 'string', mapping: 'Name'},
{name: 'Package', type: 'string', mapping: 'Package'},
{name: 'Description', type: 'string', mapping: 'Description'},
{name: 'Broker', type: 'string', mapping: 'Broker'}
]
});

// Create our column model
var QuotesColumnModel = new Ext.grid.ColumnModel({
defaults :{
sortable : true,
menuDisabled : true,
readOnly : true,
hidden : false
},
columns : [{
id : 'ID',
header : 'ID',
dataIndex : 'ID',
width : 50
},{
id : 'Name',
header : 'Name',
dataIndex : 'Name',
width : 200
},{
id : 'Package',
header : 'Package',
dataIndex : 'Package',
width : 60
},{
id : 'Description',
header : 'Description',
dataIndex : 'Description',
width : 100
},{
id : 'Broker',
header : 'Broker',
dataIndex : 'Broker',
width : 200
}]
});

// Create our grid panel
var propertyGrid = new Ext.grid.GridPanel({
title : 'Quote / Case Register',
id : 'QuoteRegister',
//autoHeight : true,
//layout : 'fit',
width : 600,
//renderTo : 'grid-ct',
store : QuotesStore,
cm : QuotesColumnModel,
trackMouseOver : true,
disableSelection : false,
loadMask : true,
// paging bar on the bottom
bbar : new Ext.PagingToolbar({
pageSize : recordLimit,
store : QuotesStore,
displayInfo : true,
displayMsg : 'Displaying cases {0} - {1} of {2}',
emptyMsg : "No cases to display"
})

});

//Create our window
var window = new Ext.Window({
height : 500,
width : 600,
layout : 'anchor',
border : false,
title : 'Quoteregister',
items : [
{
anchor : '100%',
border : false,
items :[
{
border : false,
tbar : [{
xtype :'buttongroup',
frame : false,
items : [{
text : 'All',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:'all'}})
}
}
},
{
text : 'Open',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:1}})
}
}
},
{
text : 'Active',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:4}})
}
}
},
{
text : 'Accepted',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:6}})
}
}
}
,
{
text : 'Renewal Pending',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:8}})
}
}
}
,
{
text : 'Renewed',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:10}})
}
}
}
,
{
text : 'Declined',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:3}})
}
}
},
{
text : 'Expired',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:13}})
}
}
},
{
text : 'NTU',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:5}})
}
}
}]
}]
}]
},
{
anchor : '100%, 80%',
layout : 'fit',
border : false,
items : propertyGrid
},
{
anchor : '100%, 20%',
layout : 'fit',
xtype : 'form',
frame :true,
labelAlign : 'top',
items : [
{
layout : 'column',
items : [
{
columnWidth : .5,
layout : 'form',
items : [
{
xtype : 'textfield',
fieldLabel : 'Search String',
id : 'string',
anchor : '90%'
}]
},
{
columnWidth : .4,
layout : 'form',
items : [
{
xtype : 'radiogroup',
fieldLabel : 'Search Field',
id : 'type',
items : [
{
boxLabel : 'Client Name',
name : 'radio-1',
inputValue : 0,
checked : true
},
{
boxLabel : 'Reference',
name : 'radio-1',
inputValue : 1
}]
}]
},
{
columnWidth : .1,
layout : 'form',
items : [
{
xtype :'button',
labelSeparator : ' ',
fieldLabel : ' ',
text : 'Search',
anchor :'95%',
listeners : {
click : function(){
//Get the search string
if(Ext.getDom('string').value=="")
{
Ext.MessageBox.alert('Search Error', 'Please enter a value to search for!', function()
{
return false;
});
}
else
{
var data=Ext.getDom('string').value;
}

//Get the search type
if(Ext.getCmp('type').items.items[0].checked)
{
var type=0;//Client Name
}
else
{
var type=1;//Reference
}

//Submit query
if(data)
{
QuotesStore.load({params:{start:0, limit:recordLimit, filter:'search', data:data, type:type}})
}
}
}
}]
}]
}]
}]
});

QuotesStore.load({params:{start:0, limit:recordLimit, filter:'all'}});
window.show();
});

If anyone can point me in the right direction I would be very grateful.

Thanks

Animal
5 Aug 2009, 2:01 AM
Can't read that code. Format it with [ code] tags

You need a rowclick listener.

Also, are you sure you want to navigate away from an expensively built gridPanel? I'd display details in an Ext.Window, or another Tab, or another region of a border layout. I wouldn't just drop the whole page!

catapult
5 Aug 2009, 2:19 AM
Thanks for the reply. Sorry I didn't realise it wouldn't keep my formating.



Ext.onReady(function() {
Ext.QuickTips.init();

var recordLimit=15;

// Create our datastore
var QuotesStore = new Ext.data.JsonStore({
url : 'database.php',
root : 'results',
totalProperty : 'total',
fields : [
{name: 'ID', type: 'int', mapping: 'ID'},
{name: 'Name', type: 'string', mapping: 'Name'},
{name: 'Package', type: 'string', mapping: 'Package'},
{name: 'Description', type: 'string', mapping: 'Description'},
{name: 'Broker', type: 'string', mapping: 'Broker'}
]
});

// Create our column model
var QuotesColumnModel = new Ext.grid.ColumnModel({
defaults :{
sortable : true,
menuDisabled : true,
readOnly : true,
hidden : false
},
columns : [{
id : 'ID',
header : 'ID',
dataIndex : 'ID',
width : 50
},{
id : 'Name',
header : 'Name',
dataIndex : 'Name',
width : 200
},{
id : 'Package',
header : 'Package',
dataIndex : 'Package',
width : 60
},{
id : 'Description',
header : 'Description',
dataIndex : 'Description',
width : 100
},{
id : 'Broker',
header : 'Broker',
dataIndex : 'Broker',
width : 200
}]
});

// Create our grid panel
var propertyGrid = new Ext.grid.GridPanel({
title : 'Quote / Case Register',
id : 'QuoteRegister',
//autoHeight : true,
//layout : 'fit',
width : 600,
//renderTo : 'grid-ct',
store : QuotesStore,
cm : QuotesColumnModel,
trackMouseOver : true,
disableSelection : false,
loadMask : true,
// paging bar on the bottom
bbar : new Ext.PagingToolbar({
pageSize : recordLimit,
store : QuotesStore,
displayInfo : true,
displayMsg : 'Displaying cases {0} - {1} of {2}',
emptyMsg : "No cases to display"
})

});

//Create our window
var window = new Ext.Window({
height : 500,
width : 600,
layout : 'anchor',
border : false,
title : 'Quoteregister',
items : [
{
anchor : '100%',
border : false,
items :[
{
border : false,
tbar : [{
xtype :'buttongroup',
frame : false,
items : [{
text : 'All',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:'all'}})
}
}
},
{
text : 'Open',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:1}})
}
}
},
{
text : 'Active',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:4}})
}
}
},
{
text : 'Accepted',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:6}})
}
}
}
,
{
text : 'Renewal Pending',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:8}})
}
}
}
,
{
text : 'Renewed',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:10}})
}
}
}
,
{
text : 'Declined',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:3}})
}
}
},
{
text : 'Expired',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:13}})
}
}
},
{
text : 'NTU',
scale : 'small',
listeners : {
click : function(){
QuotesStore.load({params:{start:0, limit:recordLimit, filter:5}})
}
}
}]
}]
}]
},
{
anchor : '100%, 80%',
layout : 'fit',
border : false,
items : propertyGrid
},
{
anchor : '100%, 20%',
layout : 'fit',
xtype : 'form',
frame :true,
labelAlign : 'top',
items : [
{
layout : 'column',
items : [
{
columnWidth : .5,
layout : 'form',
items : [
{
xtype : 'textfield',
fieldLabel : 'Search String',
id : 'string',
anchor : '90%'
}]
},
{
columnWidth : .4,
layout : 'form',
items : [
{
xtype : 'radiogroup',
fieldLabel : 'Search Field',
id : 'type',
items : [
{
boxLabel : 'Client Name',
name : 'radio-1',
inputValue : 0,
checked : true
},
{
boxLabel : 'Reference',
name : 'radio-1',
inputValue : 1
}]
}]
},
{
columnWidth : .1,
layout : 'form',
items : [
{
xtype :'button',
labelSeparator : ' ',
fieldLabel : ' ',
text : 'Search',
anchor :'95%',
listeners : {
click : function(){
//Get the search string
if(Ext.getDom('string').value=="")
{
Ext.MessageBox.alert('Search Error', 'Please enter a value to search for!', function()
{
return false;
});
}
else
{
var data=Ext.getDom('string').value;
}

//Get the search type
if(Ext.getCmp('type').items.items[0].checked)
{
var type=0;//Client Name
}
else
{
var type=1;//Reference
}

//Submit query
if(data)
{
QuotesStore.load({params:{start:0, limit:recordLimit, filter:'search', data:data, type:type}})
}
}
}
}]
}]
}]
}]
});

QuotesStore.load({params:{start:0, limit:recordLimit, filter:'all'}});
window.show();
});


I have added a rowclick listener which does a simple alert but, I'm still not sure how to capture the cell data and redirect from extjs.



// Create our grid panel
var propertyGrid = new Ext.grid.GridPanel({
title : 'Quote / Case Register',
id : 'QuoteRegister',
//autoHeight : true,
//layout : 'fit',
width : 600,
//renderTo : 'grid-ct',
store : QuotesStore,
cm : QuotesColumnModel,
trackMouseOver : true,
disableSelection : false,
loadMask : true,
listeners : {
rowclick : function(){
alert('this works');
}
},
// paging bar on the bottom
bbar : new Ext.PagingToolbar({
pageSize : recordLimit,
store : QuotesStore,
displayInfo : true,
displayMsg : 'Displaying cases {0} - {1} of {2}',
emptyMsg : "No cases to display"
})

});


At this time we have an existing system which we hope to completely rebuild using ext js. This is just a starting point and if I can get it working will implement and progress on from. So at this time I have to navigate away.

Animal
5 Aug 2009, 2:27 AM
You will want to consult the API docs. They explain exactly what is passed to event handlers.

catapult
5 Aug 2009, 6:18 AM
I've mananged to workout how to get the data from a cell and now I want to pass it as a param in a url to my external script.

This it the rowclick function I have:

[CODE]
rowclick : function(grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var id = record.get('ID');
//console.log(id);

var url = "

Animal
5 Aug 2009, 6:20 AM
Well, you could use window.location.href = theNewUrl

catapult
5 Aug 2009, 6:21 AM
I'll try that again :0)

I've mananged to workout how to get the data from a cell and now I want to pass it as a param in a url to my external script.

This it the rowclick function I have:



rowclick : function(grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var id = record.get('ID');
//console.log(id);
var url = 'http://www.mydomain.com/script.php?param='+id;
window.location = url;
}


The "window.location = url;" does nothing at all. Have I missed something or am I doing this completely wrong?

Animal
5 Aug 2009, 6:23 AM
Yes, you missed something.

carol.ext
5 Aug 2009, 6:24 AM
Missed href?


Well, you could use window.location.href = theNewUrl

catapult
5 Aug 2009, 6:42 AM
Ok I've added the href and I'm now trying to open anyother webpage so my code now contains :

When run I now get an error which is at least a change:


window.location is undefined
anonymous() quoteregister.js (line 78)
anonymous() ext-all.js (line 7)
anonymous() ext-base.js (line 7)
anonymous() ext-all.js (line 7)
anonymous() ext-all.js (line 7)
anonymous("click", Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 11)
anonymous(Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 11)
y() ext-all.js (line 7)
window.location.href = "http://www.bbc.co.uk";\n quoteregister.js(line 78)

Animal
5 Aug 2009, 6:45 AM
You must have set a var called window somewhere.

catapult
5 Aug 2009, 6:52 AM
You're quite right! Thanks mate. I feel like a right muppet!!

11 Dec 2012, 12:19 AM
You could use :
window.parent.location="http://www.bbc.co.uk";