PDA

View Full Version : Enabling button on grid row select



hworg
2 Jun 2009, 10:06 PM
heya,

I'm trying to enable a couple of buttons in a panel's toolbar when a row in a grid is selected...i'm not sure i'm doing it correctly (actually i am sure im not since it doesnt work /:)) anyone got some pointers?

I know it's not very pretty, i'll turn it into a single object once i have it all figured out.

the code that i attempted to do it with -


....var grid = new Ext.grid.GridPanel({
width: 500,
height: 300,
//trackMouseOver: false,
loadMask: true,
ds: data,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
rowselect: function(grid, idx, evt) { /// <--- here
editapp.enable();
}
}),
columns: [
{
header: 'Icon',
dataIndex: 'icon...
the full code -



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title id="page-title">Title</title>
<style>
.addapp {
background-image: url( resources/icons/24x24/application_add.png ) !important ;
}
.remapp {
background-image: url( resources/icons/24x24/application_remove.png ) !important ;
}
.editapp {
background-image: url( resources/icons/24x24/application_edit.png ) !important ;
}
.descapp {
background-image: url( resources/icons/24x24/applications.png ) !important ;
}
.btn-panel td {
padding-left:15px;
}

</style>
<script type="text/javascript">
// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
// Main application entry point
Ext.onReady(function() {

// *************************************************8

var data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'test.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
idProperty: 'appname',
remoteSort: true,
fields: [
{name: 'icon'},
{name: 'appname'},
{name: 'author'},
{name: 'install'},
{name: 'help'},
{name: 'desc'}
]
})
});
data.setDefaultSort('install', 'ASC');

// *************************************************8

var paging = new Ext.PagingToolbar({
pageSize: 16,
store: data,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No installed applications',
items: [
'-',
{
pressed: false,
enableToggle: true,
text: 'Show details',
cls: 'x-btn-text-icon details',
iconCls: 'descapp',
scale: 'medium',
toggleHandler: function(button, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}
]
})

// *************************************************8

renderApp = function(value, p, record) {
return String.format("<b><a href='{0}' target='_blank' style='text-decoration: none;'>{1}</a></b><br /><a href='{0}' target='_blank'>{0}</a>",
record.data.help, value);
}

// *************************************************8

renderIcon = function(value, p, record) {
return String.format("<img src='{0}' />'",
record.data.icon);
}

// *************************************************8

var editapp = new Ext.Button({
text: 'Options',
id: 'editapp',
iconCls: 'editapp',
scale: 'medium',
disabled: true,
});

var remapp = new Ext.Button({
text: 'Uninstall',
id: 'remapp',
iconCls: 'remapp',
scale: 'medium',
disabled: true,
});

// *************************************************8

var toolbar = new Ext.Toolbar({
items: [{
text: 'Install',
iconCls: 'addapp',
scale: 'medium'
}, '->', '-',
editapp,
remapp,
]
})

// *************************************************8

var grid = new Ext.grid.GridPanel({
width: 500,
height: 300,
//trackMouseOver: false,
loadMask: true,
ds: data,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
rowselect: function(grid, idx, evt) {
editapp.enable();
}
}),
columns: [
{
header: 'Icon',
dataIndex: 'icon',
renderer: renderIcon,
width: 76
}, {
id: 'appname',
header: 'Application',
dataIndex: 'appname',
width: 200,
renderer: renderApp,
sortable: true
},
{
header: 'Author',
dataIndex: 'author',
width: 100,
sortable: true
},
{
header: 'Installed',
dataIndex: 'install',
width: 120,
align: 'right',
sortable: true
}
],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: false,
getRowClass: function(record, idx, p, store) {
if (this.showPreview) {
p.body = '<p><b>Description : </b>' + record.data.desc + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: paging,
tbar: toolbar,
});

data.load({params:{start: 0, end: 16}});

// *************************************************8

var win = new Ext.Window({
title: 'Application Manager',
layout: 'fit',
items: [
grid
],
buttons: [{
text: 'Save',
}, {
text: 'Cancel',
}]
});
win.show();

});

</script>
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>

</html>

jay@moduscreate.com
3 Jun 2009, 5:07 AM
RowSelection model code({
... config params
listeners : {
rowselect: function(grid, idx, evt) { /// <--- here
editapp.enable();
}
}
})