Ich bastle seit Tagen an einer Groupinggrid mit Paging, Search, Exportfunktion, Inlineediting mit Roweditor, RSA Verschlüsslung und remote Sortierung auf alle Spalten.
Gleich ein wenig viel für den Anfang.
Also beschränke ich mich vorerst auf das Remotesorting, Grouping, RSA und eben das Paging.
Wichtig zu wissen ist hier:
Der JsonReader verarbeitet die wesentlichen Serverresponse-Values. Wie die Gesamtzahl(totalProperty) der Datensätze. “totalProperty” ist wichtig für das Paging. Ohne die Zahl werden die Navigationsbuttons nicht aktiviert und paging suxx.
root: ‘data’, Enthält die Daten zur Anwort. Ohne Daten kein View. Klar.
Die Response muss allso mindestens 3 JS-Objekte liefern. “totalCOunt, sort und data”.
Die Resonse zu der Grid mit 2 Datensätzen oben sieht also folgendermassen aus:
{ "totalCount":206, "sort":"company_name", "message":"ewqeqwewqe", "data":
[
{ "copyID":"227", "survey_name":"Mitarbeiterumfrage", "orga_name":"Trainer", "company_name":"Test23 AG", "created":"2009-06-16 19:19:13", "description":"Test" },
{ "copyID":"226", "survey_name":"Mitarbeiterumfrage2", "orga_name":"Trainer2", "company_name":"Test AG 22", "created":"2009-06-16 19:19:13", "description":"Test" },
] }
Groupstore: Beinahe noch wichtiger ist der Initialload der ersten page. Der Datastore wird beim Rendern mit der page 0 geladen
gridedtorstore.load({params:{start: 0, limit: 20}});
Der Code für die Grid dann so. Nicht über die RSA Sachen wundern. Die verschlüsslung ist hier Standar
var columnobjectsurvey = Ext.data.Record.create([{name: 'copyID',type: ''},{name: 'company_name',type: 'string'},{name: 'orga_name',type: 'string'},{name: 'created',type: 'string'},{name: 'description',type: 'string'},{name: 'survey_name',type: 'string'}]);
//proxi
surveyproxy = new Ext.data.HttpProxy({
url: '/cocominZend/0.0.1/public/survey/store/get'
});
//reader
this.surveyreader = new Ext.data.JsonReader({
totalProperty: 'totalCount',
successProperty: 'success',
idProperty: 'id',
root: 'data',
messageProperty: 'message',
fields: columnobjectsurvey
});
//writer
// The new DataWriter component.
this.surveywriter = new Ext.data.JsonWriter({
encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});
this.gridedtorstore = new Ext.data.GroupingStore({
id: 'survey',
proxy: surveyproxy,
idProperty: 'copyID',
remoteSort: true,
reader:surveyreader,
writer:surveywriter,
restful: true, // <-- This Store is RESTful
groupField:'survey_name',
sortInfo: {field: 'company_name', direction: 'ASC'},
});
gridedtorstore.load({params:{start: 0, limit: 20}});
var roweditorsurvey = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners :
{
afteredit : function(row) {
var secure = true;
var secureParam = secure ? 't' : 'f';
val='copyID###'+row.record.data.copyID+'||'+'company_name###'+row.record.data.company_name+'||'+'orga_name###'+row.record.data.orga_name+'||'+'created###'+row.record.data.created+'||'+'description###'+row.record.data.description+'||'+'survey_name###'+row.record.data.survey_name+'||';
alert(val);
if(secure){
val = rsajax.encrypt(val);
}
$.ajax({
url: '/cocominZend/0.0.1/public/admin/pgp/decrypt',
data: {val: val, secure: secureParam},
dataType: 'json',
success: function(data)
{
var val = data.val;
if(secure)
{
val = rsajax.decrypt(val);
Ext.MessageBox.alert('encrypted answer:',val);
}
else
{
Ext.MessageBox.alert('dsds','Anybody who happened to be monitoring your network activity could have seen that data.');
}
},
error: function(e)
{
Ext.MessageBox.alert('plain answer:',e.responseText);
}
});
row.record.commit();
},
}
});
var checkboxSelection = new Ext.grid.CheckboxSelectionModel({});
var editorgridsurvey = new Ext.grid.GridPanel({
store: gridedtorstore,
region:'center',
viewConfig: {forceFit: true},
stripeRows: true,
stripeCols: true,
enableColLock: false,
loadMask: true,
plugins: [roweditorsurvey],
view: new Ext.grid.GroupingView({
markDirty: true
}),
tbar: [
{
text: 'list selected',
handler: function(){
var seltext = '';
var sels = editorgridsurvey.getSelectionModel().getSelections();
for( var i = 0; i < sels.length; i++ ) {
seltext += sels[i].get('username');
}
Ext.Msg.alert('Selected', seltext);
}
}
,
{
iconCls: 'icon-user-add',
text: 'addSurvey',
handler:
function(){
var e = new columnobjectsurvey({
copyID:'newUser',company_name:'company_name',orga_name:'orga_name',created:'01/01/2010',description:'description',survey_name:'survey_name'
});
}
},
{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'removeSurvey',
disabled: true,
handler: function(){
roweditorsurvey.stopEditing();
var selections = editorgridsurvey.getSelectionModel().getSelections();
var secure = true;
var secureParam = secure ? 't' : 'f';
val='userID###'+selections[0].data.userID+'||delete###true';
alert(val);
if(secure){
val = rsajax.encrypt(val);
}
$.ajax({
url: '/cocominZend/0.0.1/public/admin/pgp/decrypt',
data: {val: val, secure: secureParam},
dataType: 'json',
success: function(data)
{
var val = data.val;
if(secure)
{
val = rsajax.decrypt(val);
Ext.MessageBox.alert('encrypted answer:',val);
}
else
{
Ext.MessageBox.alert('dsds','Anybody who happened to be monitoring your network activity could have seen that data.');
}
},
error: function(e)
{
Ext.MessageBox.alert('plain answer:',e.responseText);
}
});
for(var i = 0, r; r = selections[i]; i++){
gridedtorstore.remove(r);
}
}
},
{
text : 'printSurvey',
iconCls: 'icon-user-print',
handler: function() {
Ext.ux.GridPrinter.print(editorgridsurvey);
},
},
{
text : 'printSurvey',
iconCls: 'icon-user-print',
handler: function() {
document.location = '/cocominZend/0.0.1/public/survey/export/excel';
}
},
new Ext.PagingToolbar({
pageSize: 10,
store: gridedtorstore,
displayInfo: true,
emptyMsg: "No topics to display"
})
],
columns: [new Ext.grid.RowNumberer(),{
id: 'company_name',
header: 'company_name',
inputType:'textfield',
dataIndex: 'company_name',
sort: 'company_name',
sortable: true,
width:200,
editor: {
xtype: 'textfield',
allowBlank: false,
inputType:'textfield',
disabled:false
}},{
id: 'orga_name',
header: 'orga_name',
inputType:'textfield',
dataIndex: 'orga_name',
sort: 'orga_name',
sortable: true,
width:100,
editor: {
xtype: 'textfield',
allowBlank: false,
inputType:'textfield',
disabled:false
}},{
id: 'created',
header: 'created',
inputType:'textfield',
dataIndex: 'created',
sort: 'created',
sortable: true,
width:120,
editor: {
xtype: 'textfield',
allowBlank: false,
inputType:'textfield',
disabled:true
}},{
id: 'description',
header: 'description',
inputType:'textfield',
dataIndex: 'description',
sort: 'description',
sortable: true,
width:200,
editor: {
xtype: 'textfield',
allowBlank: false,
inputType:'textfield',
disabled:false
}},{
id: 'survey_name',
header: 'survey_name',
inputType:'textfield',
dataIndex: 'survey_name',
sort: 'survey_name',
sortable: true,
width:200,
editor: {
xtype: 'textfield',
allowBlank: false,
inputType:'textfield',
disabled:false
}}]
});
this.surveyEditorgridPanel = new Ext.Panel({
title: 'registeredUser',
layout: 'border',
autoScroll:true,
width:1200,
height: 500,
items: [editorgridsurvey]
});
editorgridsurvey.getSelectionModel()
.on('selectionchange', function(sm){
editorgridsurvey.removeBtn.setDisabled(sm.getCount() < 1);
});
var categoryStore = new Ext.data.JsonStore({
fields:['sum','categories'],data:[
{ categories:'Sonstiges',
sum: 42
},
{ categories:'Coaching',
sum: 162
}]
}); var countryStore = new Ext.data.JsonStore({
fields:['sum','countries'],data:[
{ countries:'Deutschland',
sum: 197
},
{ countries:'Schweiz',
sum: 5
},
{ countries:'Österreich',
sum: 2
}]
}); var companyCategoriesStore = new Ext.data.JsonStore({
fields:['sum','companyCategory'],data:[
{ companyCategory:'Finanzdienstleistung',
sum: 199
},
{ companyCategory:'Automobilindustrie',
sum: 5
}]
}); var companySizeStore = new Ext.data.JsonStore({
fields:['sum','companySize'],data:[
{ companySize:'Mehr als 500 Mitarbeiter',
sum: 126
},
{ companySize:'Mehr als 1000 Mitarbeiter',
sum: 70
},
{ companySize:'50 -100 Mitarbeiter',
sum: 1
},
{ companySize:'20 - 50 Mitarbeiter',
sum: 2
},
{ companySize:'weniger als 10 Mitarbeiter',
sum: 5
}]
});
var SurveyWithAveragesStore = new Ext.data.JsonStore({
fields:['name', 'surveys', 'average'],
data: [{name:'02', surveys: 32, average:'16'},{name:'03', surveys: 23, average:'11.5'},{name:'04', surveys: 30, average:'15'},{name:'05', surveys: 7, average:'3.5'},{name:'06', surveys: 39, average:'19.5'},{name:'07', surveys: 4, average:'2'},{name:'08', surveys: 4, average:'2'},{name:'09', surveys: 16, average:'8'},{name:'10', surveys: 24, average:'12'},{name:'11', surveys: 25, average:'12.5'}]}); //gets dynamicly replaced with content
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'title'},
{name: 'username'},
{name: 'lastChange', type: 'date'},
{name: 'desc',type:'text',selectable:true}
]);
// row expander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Notiz:</b> {desc}</p>'
)
});
und der Gridpanel noch zu guterletzt
new Ext.Panel({
id :'surveyEditorgridPanel',
title :'surveyEditorgridPanel',
region :'center',
deferredRender :false,
layout :'table',
frame :true,
padding :10,
autoScroll :true,
layoutConfig :{columns:1},
defaults :{frame:true, width:900, height: 450},
items:[
{
title:'User: cocomin',
items:[{}],
colspan:2,
width:900,
height:70,
margin:10,
html: '<h1>Hallo cocomin heute ist der #date#. Willkommen in Deiner Umfrageadministration</h1><p>Im folgenden findest Du die neuesten Daten aus Deinen Umfragen. <input type="button" value="export"></p>'
}
,
surveyEditorgridPanel
]
})
