Results 1 to 3 of 3

Thread: Property Grid unknown fields

  1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    264

    Default Property Grid unknown fields

    Hello !

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

    Here the server side:

    Code:
    $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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Feb 2009
    Posts
    264

    Default My first way

    Hello !

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

    Code:
    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:

    Code:
    <?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

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Posts
    264

    Default Custom Editors

    Hello !

    I have build in custom editors.

    Code:
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •