PDA

View Full Version : Property Grid unknown fields



Stephan123
3 Mar 2010, 3:24 AM
Hello !

I will generate an PropertyGrid.
The name of the fields in this prop is unknown.

Here the server side:


$wert[0]['Name'] = 'Name 1';
$wert[0]['Value'] = 'Value 1';
$wert[0]['Typ'] = 'Typ 1';

$wert[1]['Name'] = 'Name 2';
$wert[1]['Value'] = 'Value 2';
$wert[1]['Typ'] = 'Typ 2';


echo "{success: true, data: ".json_encode($wert)."}";

On the client i have an JSON Store:


new Ext.data.JsonStore({
// autoLoad: true, //autoload the data
url: 'datenbank.php',
root: 'data',
fields: ['Name', 'Value', 'Typ'],
method: 'post',
baseParams: {
modul: 'test1',
aktion:'holeDaten'
},
listeners: {
load: {
fn: function(store, records, options){

var propGrid = Ext.getCmp('prop-grid');

if (propGrid) {

propGrid.setSource(store.getAt(0).data);

}
}
}
}
}) // Ende PropertyGridStore


How can i generate a property grid when i don't now the name of the
'fields'.

Your sincerly

Stephan

Stephan123
3 Mar 2010, 6:08 AM
Hello !

I have build a propertyGrid with load and send data with Ajax.
On client side.


App.fenster = function(){

return{

wakeup: function(){

this.fenster = new Ext.Window({
title: 'Fenster',
width: 500,
autoHeight: true,
layout: 'table',
id: 'fenster',
layoutConfig: {
columns: 2,
border: false
},
items: [{
html: 'Infobereich',
width: 500,
colspan: 2,
height: 100
},{
html: 1,
width: 200,
height: 300
},{
width: 300,
height: 300,
items: [
this.PropGrid
]
},{
html: 'Aktion',
colspan: 2,
height: 100
}]
});

this.fenster.show();

// this.PropertyGridStore.load();

this.AjaxPropGrid; // Ajax - Store


}, // Ende Fenster


PropGrid: new Ext.grid.PropertyGrid({
width: 300,
autoHeight: true,
border: false,
id: 'prop-grid',
propertyNames: {
test1: 'MyTest'
},
source: {}, // initialisieren Source Config Objekt
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
},
bbar: {
height: 30,
items: [{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'absenden',
handler: function(){

var test = Ext.getCmp('prop-grid').getSource();
var test1 = Ext.util.JSON.encode(test);

Ext.Ajax.request({
url: 'datenbank.php',
method: 'post',
params: {
modul: 'test1',
aktion: 'sendeDaten',
value: test1
}
});

}
},{
xtype: 'tbseparator'
}]
} // Ende Button
}), // Ende Property Grid

AjaxPropGrid: Ext.Ajax.request({
url: 'datenbank.php',
method: 'post',
params: {
modul: 'test1',
aktion: 'holeDaten'
},
success: function(result,request){

var wert = Ext.util.JSON.decode(result.responseText);

var propGrid = Ext.getCmp('prop-grid');

// Add record to an already populated grid
propGrid.setSource(wert);

return;
}
}) // Ende Ajax - Store


} // Ende public

}();

Ext.onReady(App.fenster.wakeup,App.fenster);

On server side:


<?php

/**
* @author Stephan Krauß
* @copyright 2010
*/

// hole Daten

if($_POST['aktion'] == 'holeDaten'){
$test['test1'] = "Test 1";
$test['test2'] = "Test 2";
$test['test3'] = 5;

exit(json_encode($test));
}

// sende Daten
if($_POST['aktion'] == 'sendeDaten'){

$wert = json_decode($_POST['value']);
var_dump($wert);

}



?>

O.K. is not the best way. :(

In the moment i look for a way to validate the propertygrid.
And plug in comboboxes. Is there an example on this planet ?

Your sincerly Stephan

Stephan123
3 Mar 2010, 7:42 AM
Hello !

I have build in custom editors.


customEditors: {
'test2': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true})),
'test1': new Ext.grid.GridEditor(new Ext.form.ComboBox({
mode: 'local',
typeAhead: true,
triggerAction: 'all',
selectOnFocus: true,
displayField: 'wert',
store: new Ext.data.SimpleStore({
fields: ['id','wert'],
data: [['1','Name 1'],['2','Name 2'],['3','Name 3']],
}) // Ende Store
})) // Ende Combobox
},

But how can i define a standard editor for the other fields ?
How can i hide the head of the property grid ?

Your sincerly

Stephan