PDA

View Full Version : [Problem] Save values of a dynamic grid



GregorSamsa
18 Mar 2009, 4:01 AM
Hello everyone!

I'm working on a panel for administrating permissions in a MediaWiki.

On my panel, i have one main grid with a list of all groups.
If you now click on a group you get at the east-section another Grid which lists the permission of each group (read, write, create, move). Each right is displayed as a checkbox.

Now if you activate the checkboxes, the values should be written into the database via ajax request. But they don't. The request is not executed.

I hope someone can help me!

Greets
Gregor

http://img3.imagebanana.com/img/d438hkhd/admin.jpg



I think the relevant code is the following:


var permissionspanel = new Ext.Panel({
bodyStyle:'border:0px solid black;',
layout:'fit',
html: '<h2>Please select a Group to see the Permissions.</h2>'


});

var groupslist = {
id: 'groupslist-panel',
title: 'List of all groups',
layout: 'border',
bodyStyle:'border:0px solid black;',
items:[{
region: 'center',
height:'auto',
width:680,
items: GroupsListingEditorGrid,
},{
id:'permission-panel',
height:'auto',
addClass:'permissionPanel',
region:'east',
width:320,
split:true,
xtype:'panel',
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
items: permissionspanel,
}]
};

function savePermissions(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'modules/groups/groups.php',
params: {
task: 'SAVEPERM',
record: oGrid_event.record.data.item,
groups_id: oGrid_event.record.data.group,
itemtype: oGrid_event.record.data.itemtype,
read: oGrid_event.record.data.read,
write: oGrid_event.record.data.write,
create: oGrid_event.record.data.create,
move: oGrid_event.record.data.move

},
success: function(response){
var result = eval(response.responseText);
switch(result){

case 1:
PermissionsDatastore.commitChanges();
PermissionsDatastore.reload();
Ext.Messagebox.alert('New Entry!');
break;
case 2:
PermissionsDatastore.commitChanges();
PermissionsDatastore.reload();
break;
default:
Ext.Messagebox.alert('Couldn\'t save permission');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}

});

}


function buildPerm(ds){




var PermissionsDataStore = new Ext.data.Store({
id: 'PermissionsDataStore',
proxy: new Ext.data.HttpProxy({

url: 'modules/groups/groups.php',
method: 'POST'

}),
baseParams:{task: "PERMISSION",record: ds.id},
reader: new Ext.data.JsonReader({

root: 'results',
totalProperty: 'total',
id: 'item'

},[
{name: 'group', type: 'int', mapping: 'group'},
{name: 'item', type: 'int', mapping: 'item'},
{name: 'itemname', type: 'string', mapping: 'itemname'},
{name: 'itemtype', type: 'int', mapping: 'itemtype'},
{name: 'read',type: 'boolean', mapping: 'read'},
{name: 'write',type: 'boolean', mapping: 'write'},
{name: 'create',type: 'boolean', mapping: 'create'},
{name: 'move',type: 'boolean', mapping: 'move'}
]),
sortInfo:{ field: 'item', direction: "ASC"}

});


// custom column plugin example
var read = new Ext.grid.CheckColumn({
header: "read",
dataIndex: 'read',
width: 50
});
var write = new Ext.grid.CheckColumn({
header: "write",
dataIndex: 'write',
width: 50
});
var create = new Ext.grid.CheckColumn({
header: "create",
dataIndex: 'create',
width: 50
});
var move = new Ext.grid.CheckColumn({
header: "move",
dataIndex: 'move',
width: 50
});

var PermissionsColumnModel = new Ext.grid.ColumnModel(

[
{
header: "Name",
dataIndex: 'itemname',
width: 100,
readOnly: false,
hidden: false

},
read,
write,
create,
move]
);


var PermissionsListingEditorGrid = new Ext.grid.GridPanel({

id: 'PermissionsListingEditorGrid',
store: PermissionsDataStore,
cm: PermissionsColumnModel,
enableColLock: false,
bodyStyle:'border:0px solid black;',
autoHeight:true,
stripeRows: true,
plugins:[read,write,create,move],
collapsible: true,
clicksToEdit: 2,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})


});
var pds = PermissionsDataStore;
PermissionsDataStore.load();
//alert(PermissionsListingEditorGrid.getView());
PermissionsListingEditorGrid.getView().getRowClass = function(pds, index){
return (pds.data.itemtype<1 ? (pds.data.itemtype<2 ? '' : 'page-row') : 'namespace-row');
};

//alert(index);
var PermissionsPanel = new Ext.Panel({
height:'auto',
bodyStyle: 'border:0px solid black;background: #FFF;',
layout: 'fit',
items:[{
region: 'north',
bodyStyle:'border:0px solid black;',
height:25,
html:'<h2>Permissions of '+ds.data.groupname+'</h2>'
},{
region: 'center',
bodyStyle: '',
autoHeight:true,
items: PermissionsListingEditorGrid
}]

});





return PermissionsPanel;
}

GroupsListingEditorGrid.getSelectionModel().on('rowselect', function(sm, rowIdx, GroupsDataStore) {
var permissionPanel = Ext.getCmp('permission-panel');
permissionPanel.removeAll();
permissionPanel.add(buildPerm(GroupsDataStore));
permissionPanel.doLayout();
var permissionGrid = Ext.getCmp('PermissionsListingEditorGrid');
GroupsListingEditorGrid.on("afteredit",savePermissions);

});

Animal
18 Mar 2009, 4:32 AM
Hi Gregor (How's life as an arthropod?! ;) )

I don't think afteredit fires for checkboxes of an EditorGridPanel. It's a little different. It's not a separate editor which is popped up temporarily during the edit, and then fires an event.

It's an Ext.grid.CheckColumn which is not an integral, supported part of Ext.

You can modify this class to fire an event through the GridPanel which your code can listen for.

GregorSamsa
18 Mar 2009, 9:03 AM
Hey Animal, life as a arthropod can be very hard! Many schoes which stamp :))

Thanks for your help!! Now it works! Now the event fires in the class of the checkbox.

Thank you!