1. #11
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    298
    Vote Rating
    0
    Remy is on a distinguished road

      0  

    Default


    A bit more digging around and I do need a renderer to show the displayField attributes, I had my test rendering function within the wrong braces and at least I know its functioning now. Anyone have any hints on debugging using Firebug when you are eval'ing ajax responses? This is making it mighty tricky to debug. At the moment I am taking my rendered response, running through JSONLint.com and viewing the results, not debugging per se but the easiest way I can think of showing the full results. Its like debugging someone else's code

  2. #12
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by Remy View Post
    Anyone have any hints on debugging using Firebug when you are eval'ing ajax responses? This is making it mighty tricky to debug.
    Deserving of it's own thread. I just hit this myself. Maybe post a different thread for it. One way around this might be adding the source to the head instead of eval'ing it. I'm still using Firebug 1.05, maybe newer versions handle it better?

  3. #13
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by Remy View Post
    Anyone have any hints on debugging using Firebug when you are eval'ing ajax responses?
    Came across something that would help with this (aside from using script that you can toggle to instead of eval'ing you append the source code to the document head element):
    http://www.almaden.ibm.com/u/bartonj...pse/index.html

  4. #14
    Ext User
    Join Date
    Jan 2008
    Posts
    20
    Vote Rating
    0
    dsonet is on a distinguished road

      0  

    Arrow Here is the more flexible version to the PropertyGrid

    Here is the more flexible version to the PropertyGrid


    PHP Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    /**
     * @class Ext.grid.PropertyRecord
     * @modifier: DSONet (dsonet@msn.com)
     * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the
     * {@link Ext.grid.PropertyGrid}.  Typically, PropertyRecords do not need to be created directly as they can be
     * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}
     * config property or by calling {@link Ext.grid.PropertyGrid#setSource}.  However, if the need arises, these records
     * can also be created explicitly as shwon below.  Example usage:
     * <pre><code>
    var rec = new Ext.grid.PropertyRecord({
        name: 'Birthday',
        value: new Date(Date.parse('05/26/1972'))
    });
    // Add record to an already populated grid
    grid.ds.addSorted(rec);
    </code></pre>
     * @constructor
     * @param {Object} config A data object in the format: {name: [name], value: [value]}.  The specified value's type
     * will be read automatically by the grid to determine the type of editor to use when displaying it.
     */
    Ext.grid.PropertyRecord Ext.data.Record.create([
        {
    name:'name',type:'string'}, 'value'"field"
    ]);
    /**
     * @class Ext.grid.PropertyStore
     * @extends Ext.util.Observable
     * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping
     * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
     * required for compatibility with the underlying store. Generally this class should not need to be used directly --
     * the grid's data should be accessed from the underlying store via the {@link #store} property.
     * @constructor
     * @param {Ext.grid.Grid} grid The grid this store will be bound to
     * @param {Object} source The source data config object
     */
    Ext.grid.PropertyStore = function(gridsource){
        
    this.grid grid;
        
    this.store = new Ext.data.Store({
            
    recordType Ext.grid.PropertyRecord
        
    });
        
    this.store.on('update'this.onUpdate,  this);
        if(
    source){
            
    this.setSource(source);
        }
        
    Ext.grid.PropertyStore.superclass.constructor.call(this);
    };
    Ext.extend(Ext.grid.PropertyStoreExt.util.Observable, {
        
    // protected - should only be called by the grid.  Use grid.setSource instead.
        
    setSource : function(ofields){
            
    this.source o;
            
    this.store.removeAll();
            var 
    data = [], l;
            if (
    fields && (fields.length))
            {
                var 
    = -1kn;
                while (++
    l)
                {

                    
    fields[i];

                    if (
    typeof (k) == 'object' && (k.dataIndex || k.id) && this.isEditableValue(o[n]))
                    {
                        
    /*if(k.header)
                            this.grid.propertyNames[n] = k.header;
                        if(k.editor)
                            this.grid.customEditors[n] = k.editor;*/

                        
    data.push(new Ext.grid.PropertyRecord(
                        {
                            
    namen,
                            
    valueo[n],
                            
    fieldk
                        
    }, k.id || k.dataIndex));
                    }
                }
            }
            else
            {
                for (var 
    k in o)
                {
                    if (
    this.isEditableValue(o[k]))
                    {
                        
    data.push(new Ext.grid.PropertyRecord(
                        {
                            
    namek,
                            
    valueo[k]
                        }, 
    k));
                    }
                }
            }
            
    this.store.loadRecords({recordsdata}, {}, true);
        },
        
    // private
        
    onUpdate : function(dsrecordtype){
            if(
    type == Ext.data.Record.EDIT){
                var 
    record.data['value'];
                var 
    oldValue record.modified['value'];
                if(
    this.grid.fireEvent('beforepropertychange'this.sourcerecord.idvoldValue) !== false){
                    
    this.source[record.id] = v;
                    
    record.commit();
                    
    this.grid.fireEvent('propertychange'this.sourcerecord.idvoldValue);
                }else{
                    
    record.reject();
                }
            }
        },
        
    // private
        
    getProperty : function(row){
           return 
    this.store.getAt(row);
        },
        
    // private
        
    isEditableValue: function(val){
            if(
    Ext.isDate(val)){
                return 
    true;
            }else if(
    typeof val == 'object' || typeof val == 'function'){
                return 
    false;
            }
            return 
    true;
        },
        
    // private
        
    setValue : function(propvalue){
            
    this.source[prop] = value;
            
    this.store.getById(prop).set('value'value);
        },
        
    // protected - should only be called by the grid.  Use grid.getSource instead.
        
    getSource : function(){
            return 
    this.source;
        }
    });
    /**
     * @class Ext.grid.PropertyColumnModel
     * @extends Ext.grid.ColumnModel
     * A custom column model for the {@link Ext.grid.PropertyGrid}.  Generally it should not need to be used directly.
     * @constructor
     * @param {Ext.grid.Grid} grid The grid this store will be bound to
     * @param {Object} source The source data config object
     */
    Ext.grid.PropertyColumnModel = function(gridstore){
        
    this.grid grid;
        var 
    Ext.grid;
        
    g.PropertyColumnModel.superclass.constructor.call(this, [
            {
    headerthis.nameTextwidthgrid.nameWidthsortabletruedataIndex'name'id'name'menuDisabledtrue},
            {
    headerthis.valueTextwidthgrid.valueWidthresizablefalsedataIndex'value'id'value'menuDisabledtrue}
        ]);
        
    this.store store;
        
    this.bselect Ext.DomHelper.append(document.body, {
            
    tag'select'cls'x-grid-editor x-hide-display'children: [
                {
    tag'option'value'true'html'true'},
                {
    tag'option'value'false'html'false'}
            ]
        });
        var 
    Ext.form;
        var 
    bfield = new f.Field({
            
    el:this.bselect,
            
    bselect this.bselect,
            
    autoShowtrue,
            
    getValue : function(){
                return 
    this.bselect.value == 'true';
            }
        });
        
    this.editors = {
            
    'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
            
    'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
            
    'number' : new g.GridEditor(new f.NumberField({selectOnFocus:truestyle:'text-align:left;'})),
            
    'boolean' : new g.GridEditor(bfield)
        };
        
    this.initialTypes = {};
        
    this.renderCellDelegate this.renderCell.createDelegate(this);
        
    this.renderPropDelegate this.renderProp.createDelegate(this);
    };
    Ext.extend(Ext.grid.PropertyColumnModelExt.grid.ColumnModel, {
        
    // private - strings used for locale support
        
    nameText 'Name',
        
    valueText 'Value',
        
    dateFormat 'm/j/Y',
        
    // private
        
    renderDate : function(dateVal){
            return 
    dateVal.dateFormat(this.dateFormat);
        },
        
    // private
        
    renderBool : function(bVal){
            return 
    bVal 'true' 'false';
        },
        
    // private
        
    isCellEditable : function(colIndexrowIndex){
            var 
    this.store.getProperty(rowIndex);
            if (
    p.data.field && p.data.field.editable == false)
            {
                return 
    false;
            }
            return 
    colIndex == 1;
        },
        
    // private
        
    getRenderer : function(col){
            return 
    col == ?
                
    this.renderCellDelegate this.renderPropDelegate;
        },
        
    // private
        
    renderProp : function(vmetadatarecord){
            var 
    ref;
            if ((
    ref record.data.field) && typeof (ref.header) != 'undefined')
            {
                return 
    ref.header;
            }
            var 
    pn this.grid.propertyNames;
            return 
    pn && pn[v] ? pn[v] : v;
            
    //return this.getPropertyName(v);
        
    },
        
    // private
        
    renderCell : function(valmetadatarecord){//, rowIndex, colIndex, store
            
    var ref;
            if ((
    ref record.data.field) && typeof (ref.renderer) == 'function')
            {
                return 
    ref.renderer.apply(thisarguments);
            }
            var 
    rv val;
            if(
    Ext.isDate(val)){
                
    rv this.renderDate(val);
            }else if(
    typeof val == 'boolean'){
                
    rv this.renderBool(val);
            }
            return 
    Ext.util.Format.htmlEncode(rv);
        },
        
    // private
        /*getPropertyName : function(name){
            var pn = this.grid.propertyNames;
            return pn && pn[name] ? pn[name] : name;
        },*/
        // private
        
    getCellEditor : function(colIndexrowIndex){
            var 
    this.store.getProperty(rowIndex);
            var 
    p.data['name'], val p.data['value'];
            if (
    p.data.field && typeof (p.data.field.editor) == 'object')
            {
                return 
    p.data.field.editor;
            }
            else if(
    this.grid.customEditors[n]){
                return 
    this.grid.customEditors[n];
            }
            var 
    this.initialTypes[n];
            if(
    t)
            {
                return 
    this.editors[t];
            }
            if(
    Ext.isDate(val)){
                
    "date";
            }
            else
            {
                var 
    vt typeof val;
                switch(
    vt)
                {
                    case 
    "number":
                    case 
    "boolean":
                        
    vt;break;
                    default:
                        
    "string";
                }
            }
            
    this.initialTypes[n] = t;
            return 
    this.editors[t];
        }
    });
    /**
     * @class Ext.grid.PropertyGrid
     * @extends Ext.grid.EditorGridPanel
     * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
     * development IDEs.  Each row in the grid represents a property of some object, and the data is stored
     * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage:
     * <pre><code>
    var grid = new Ext.grid.PropertyGrid({
        title: 'Properties Grid',
        autoHeight: true,
        width: 300,
        renderTo: 'grid-ct',
        source: {
            "(name)": "My Object",
            "Created": new Date(Date.parse('10/15/2006')),
            "Available": false,
            "Version": .01,
            "Description": "A test object"
        }
    });
    </pre></code>
     * @constructor
     * @param {Object} config The grid config object
     */
    var PropertyGrid Ext.grid.PropertyGrid Ext.extend(Ext.grid.EditorGridPanel, {
        
    /**
        * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
        */
        /**
        * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
        * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing
        * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
        * associated with a custom input control by specifying a custom editor.  The name of the editor
        * type should correspond with the name of the property that will use the editor.  Example usage:
        * <pre><code>
    var grid = new Ext.grid.PropertyGrid({
        ...
        customEditors: {
            'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
        },
        source: {
            'Start Time': '10:00 AM'
        }
    });
    </code></pre>
        */
        // private config overrides
        
    enableColumnMove:false,
        
    stripeRows:false,
        
    trackMouseOverfalse,
        
    clicksToEdit:1,
        
    enableHdMenu false,
        
    editabletrue,
        
    nameWidth50,
        
    valueWidth50,
        
    autoExpandColumn'value',
        
    viewConfig : {
            
    forceFit:true
        
    },
        
    // private
        
    initComponent : function(){
            
    this.propertyNames this.propertyNames || {};
            
    this.customEditors this.customEditors || {};
            
    this.lastEditRow null;
            var 
    store = new Ext.grid.PropertyStore(this);
            
    this.propStore store;
            var 
    cm = new Ext.grid.PropertyColumnModel(thisstore);
            
    store.store.sort('name''ASC');
            
    //this.addEvents(
                /**
                 * @event beforepropertychange
                 * Fires before a property value changes.  Handlers can return false to cancel the property change
                 * (this will internally call {@link Ext.data.Record#reject} on the property's record).
                 * @param {Object} source The source data object for the grid (corresponds to the same object passed in
                 * as the {@link #source} config property).
                 * @param {String} recordId The record's id in the data store
                 * @param {Mixed} value The current edited property value
                 * @param {Mixed} oldValue The original property value prior to editing
                 */
                //'beforepropertychange',
                /**
                 * @event propertychange
                 * Fires after a property value has changed.
                 * @param {Object} source The source data object for the grid (corresponds to the same object passed in
                 * as the {@link #source} config property).
                 * @param {String} recordId The record's id in the data store
                 * @param {Mixed} value The current edited property value
                 * @param {Mixed} oldValue The original property value prior to editing
                 */
                //'propertychange'
            //);
            
    this.cm cm;
            
    this.ds store.store;
            
    PropertyGrid.superclass.initComponent.call(this);
            
    this.selModel.on('beforecellselect', function(smrowIndexcolIndex){
                if(
    colIndex === 0){
                    
    this.startEditing.defer(200this, [rowIndex1]);
                    return 
    false;
                }
            }, 
    this);
            if (!
    this.editable)
            {
                
    this.on('beforeedit'Ext.falseFn);
            }
        },
        
    // private
        
    onRender : function(){
            
    PropertyGrid.superclass.onRender.apply(thisarguments);
            
    this.getGridEl().addClass('x-props-grid');
        },
        
    // private
        
    afterRender: function(){
            
    PropertyGrid.superclass.afterRender.apply(thisarguments);
            if(
    this.source){
                
    this.setSource(this.sourcethis.fields);
            }
        },
        
    /**
         * Sets the source data object containing the property data.  The data object can contain one or more name/value
         * pairs representing all of the properties of an object to display in the grid, and this data will automatically
         * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed,
         * otherwise string type will be assumed.  If the grid already contains data, this method will replace any
         * existing data.  See also the {@link #source} config value.  Example usage:
         * <pre><code>
    grid.setSource({
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),  // date type
        "Available": false,  // boolean type
        "Version": .01,      // decimal type
        "Description": "A test object"
    });
    </code></pre>
         * @param {Object} source The data object
         */
        
    setSource : function(sourcefields){
            
    this.propStore.setSource(sourcefields);
        },
        
    /**
         * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the
         * format of the data object.
         * @return {Object} The data object
         */
        
    getSource : function(){
            return 
    this.propStore.getSource();
        }
    });
    Ext.reg("propertygrid"PropertyGrid); 

  5. #15
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
    somebee is on a distinguished road

      0  

    Default


    Fantastic extension! Any plans to make this compatible with Extjs 3.0?

  6. #16
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    287
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default 3.2 working version

    3.2 working version


    Plug & Play
    Code:
    /* http://www.extjs.com/forum/showthread.php?t=41390 */
    Ext.namespace('Ext.ux.grid');
    Ext.ux.grid.PropertyRecord = Ext.data.Record.create([
        {name:'name',type:'string'}, 'value', 'header', 'field'
    ]);
    
    Ext.ux.grid.PropertyStore = function(grid, source){
        this.grid = grid;
        this.store = new Ext.data.Store({
            recordType : Ext.grid.PropertyRecord
        });
    
            this.store.loadRecords = function(o, options, success){
            if(!o || success === false){
                if(success !== false){
                    this.fireEvent("load", this, [], options);
                }
                if(options.callback){
                    options.callback.call(options.scope || this, [], options, false);
                }
                return;
            }
    
            var r = o.records, t = o.totalRecords || r.length;
    
            if(!options || options.add !== true){
                if(this.pruneModifiedRecords){
                    this.modified = [];
                }
    
                for(var i = 0, len = r.length; i < len; i++){
                    r[i].join(this);
                }
    
                if(this.snapshot){
                    this.data = this.snapshot;
                    delete this.snapshot;
                }
    
                this.data.clear();
                this.data.addAll(r);
                this.totalLength = t;
                //this.applySort();
                this.fireEvent("datachanged", this);
    
            }else{
                this.totalLength = Math.max(t, this.data.length+r.length);
                this.add(r);
            }
    
            this.fireEvent("load", this, r, options);
    
            if(options.callback){
                options.callback.call(options.scope || this, r, options, true);
            }
        };
    
        this.store.on('update', this.onUpdate,  this);
        if(source){
            this.setSource(source);
        }
    
        Ext.ux.grid.PropertyStore.superclass.constructor.call(this);
    };
    
    Ext.extend(Ext.ux.grid.PropertyStore, Ext.util.Observable, {
        setSource : function(o,fields){
            this.source = o;
            this.store.removeAll();
            var data = [];
    
            if (fields) {
                for (var k in fields) {
                    k=fields[k];
                    if (typeof(k) == 'object'){
                    //if (k.id && this.isEditableValue(o[k.dataIndex])) {
                        data.push(new Ext.grid.PropertyRecord({
                            name: k.dataIndex,
                            value: o[k.dataIndex],
                            header: k.header,
                            field: k
                        }, k.id));
                    }
                }
            } else {
                for (var k in o) {
                    if (this.isEditableValue(o[k])) {
                        data.push(new Ext.grid.PropertyRecord({
                            name: k,
                            value: o[k],
                            header: k
                        }, k));
                    }
                }
            }
            this.store.loadRecords({records: data}, {}, true);
        },
    
        onUpdate : function(ds, record, type){
            if(type == Ext.data.Record.EDIT){
                var v = record.data['value'];
                var oldValue = record.modified['value'];
                if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
                    this.source[record.id] = v;
                    record.commit();
                    this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
                }else{
                    record.reject();
                }
            }
        },
    
        getProperty : function(row){
           return this.store.getAt(row);
        },
    
        isEditableValue: function(val){
            if(Ext.isDate(val)){
                return true;
            }else if(typeof val == 'object' || typeof val == 'function'){
                return false;
            }
            return true;
        },
    
        setValue : function(prop, value){
            this.source[prop] = value;
            this.store.getById(prop).set('value', value);
        },
    
        getSource : function(){
            return this.source;
        }
    });
    
    Ext.ux.grid.PropertyColumnModel = function(grid, store){
        this.grid = grid;
        var g = Ext.grid;
        var f = Ext.form;
        this.store = store;
        
        Ext.ux.grid.PropertyColumnModel.superclass.constructor.call(this, [
            {header: this.nameText, width:grid.nameWidth, fixed:true, sortable: true, dataIndex:'header', id: 'name', menuDisabled:true},
            {header: this.valueText, width:grid.valueWidth, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
        ]);
    
        this.booleanEditor = new Ext.form.ComboBox({
                triggerAction : 'all',
                mode : 'local',
                valueField : 'boolValue',
                displayField : 'name',
                editable:false,
                selectOnFocus: true,
                forceSelection: true,
                store : {
                    xtype : 'arraystore',
                    idIndex : 0,
                    fields : ['boolValue','name'],
                    data : [[false,'false'],[true,'true']]
                    }
        });
    
        this.editors = {
            'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
            'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
            'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
            'boolean' : new g.GridEditor(this.booleanEditor)
        };
    
        this.renderCellDelegate = this.renderCell.createDelegate(this);
        this.renderPropDelegate = this.renderProp.createDelegate(this);
    };
    
    Ext.extend(Ext.ux.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
        nameText : 'Name',
        valueText : 'Value',
        dateFormat : 'j/m/Y',
    
        renderDate : function(dateVal){
            return dateVal.dateFormat(this.dateFormat);
        },
    
        renderBool : function(bVal){
            return bVal ? 'true' : 'false';
        },
    
        isCellEditable : function(colIndex, rowIndex){
                var p = this.store.getProperty(rowIndex);
                if (p.data.field && p.data.field.editable == false) {
                        return false;
                    }
            return colIndex == 1;
        },
    
        getRenderer : function(col){
            return col == 1 ? this.renderCellDelegate : this.renderPropDelegate;
        },
    
        renderProp : function(v){
            return this.getPropertyName(v);
        },
    
        renderCell : function(val, metadata, record, rowIndex, colIndex, store){
            if (record.data.field && typeof(record.data.field.renderer) == 'function'){
                return record.data.field.renderer.call(this, val, metadata, record, rowIndex, colIndex, store);
            }
    
            var rv = val;
            if(Ext.isDate(val)){
                rv = this.renderDate(val);
            }else if(typeof val == 'boolean'){
                rv = this.renderBool(val);
            }
            return Ext.util.Format.htmlEncode(rv);
        },
    
        getPropertyName : function(name){
            var pn = this.grid.propertyNames;
            return pn && pn[name] ? pn[name] : name;
        },
    
        getCellEditor : function(colIndex, rowIndex){
            var p = this.store.getProperty(rowIndex);
            var n = p.data['name'], val = p.data['value'];
            if(p.data.field && typeof(p.data.field.editor) == 'object'){
                return p.data.field.editor;
            }
    
            if(typeof(this.grid.customEditors) == 'function'){
                return this.grid.customEditors(n);
            }
    
            if(Ext.isDate(val)){
                return this.editors['date'];
            }else if(typeof val == 'number'){
                return this.editors['number'];
            }else if(typeof val == 'boolean'){
                return this.editors['boolean'];
            }else{
                return this.editors['string'];
            }
        },
    
        destroy : function(){
            Ext.ux.grid.PropertyColumnModel.superclass.destroy.call(this);
            for(var ed in this.editors){
                Ext.destroy(this.editors[ed]);
            }
        }
    });
    
    Ext.ux.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
        enableColumnMove:false,
        stripeRows:false,
        trackMouseOver: false,
        clicksToEdit:1,
        enableHdMenu : false,
        editable: true,
        nameWidth: 120,
        valueWidth: 50,
        source: {},
        autoExpandColumn: 'value',
    
        initComponent : function(){
            this.customEditors = this.customEditors || {};
            this.lastEditRow = null;
            var store = new Ext.ux.grid.PropertyStore(this);
            this.propStore = store;
            var cm = new Ext.ux.grid.PropertyColumnModel(this, store);
            store.store.sort('name', 'ASC');
            this.addEvents(
                'beforepropertychange',
                'propertychange'
            );
            this.cm = cm;
            this.ds = store.store;
            Ext.ux.grid.PropertyGrid.superclass.initComponent.call(this);
    
            this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){
                if(colIndex === 0){
                    this.startEditing.defer(200, this, [rowIndex, 1]);
                    return false;
                }
            }, this);
                    if (!this.editable){
                        this.on('beforeedit', function(){return false})
                    }
        },
    
        onRender : function(){
            Ext.ux.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
            this.getGridEl().addClass('x-props-grid');
        },
    
        afterRender: function(){
            Ext.ux.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
            if(this.source){
                this.setSource(this.source);
            }
        },
    
        setSource : function(source){
            this.propStore.setSource(source,this.fields);
        },
    
        load : function(source){
            this.setSource(source);
        },
    
        loadRecord : function(record) {
            record.data && this.setSource(record.data);
        },
    
        getSource : function(){
            return this.propStore.getSource();
        },
    
        setEditable: function(rowIndex, editable) {
          var p = this.store.getProperty(rowIndex);
          if(p.data.field) p.data.field.editable = editable;
        }
    });
    Ext.reg("propertygrid2", Ext.ux.grid.PropertyGrid);
    Last edited by Stju; 21 Mar 2010 at 11:08 AM. Reason: Added destroy method

  7. #17
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default PropertyGrid - Trying to get field name

    PropertyGrid - Trying to get field name


    Hello,

    I've mostly only need this property grid as a full non-editable property grid. But now my would like to be able to do some updates to particular fields.

    My only problem is that I'm unable to get the value e.field. I always get undefined. Can anybody help with this. I thought that the field was automatically derived from the name of the field?

    Thanks

    Jack

    Here is my column declaration:
    Code:
    {
    	  dataIndex: 'address',
    	 header: 'Address',
    	 editable: true
    }
    Here is my store fields:

    Code:
    ,reader: new Ext.data.JsonReader({
               root: 'results'
              ,id: 'cust_id'         
              ,fields: [
                 {name: 'cust_id', type: 'int'}
    	    ,{name: 'first_name'}
                ,{name: 'address'}
                ,{name: 'city'}
                ,{name: 'state'}
                ,{name: 'country'}
              ]                             
            })

  8. #18
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


    There seems to be problems with the custom editors:

    Failing code example - try adding your own editor

    Code:
    ,{
    									   		 dataIndex: 'DATABASE_LOG_MODE'
    											,header: 'Log Mode'
    									        //,editable: true
    											,editor: new Ext.form.ComboBox({
    							          			 lazyRender: true
    												,triggerAction: 'all'
    												,store: new Ext.data.SimpleStore({
    													 fields: ['id','text']				
    													,data: [['ARCHIVELOG','ARCHIVELOG'],['NOARCHIVELOG','NOARCHIVELOG']]
    												})
    												,editable: false
    												,displayField: 'text'
    												,valueField: 'id'
    												,mode: 'local'
    												,typeAhead: false
    												,forceSelection: true
    											})
    								       	}
    I caught this in Firebug, unfortunately, I don't knwo how to fix it.
    Code:
    ed.startEdit is not a function
    [Break on this error] ed.startEdit(this.view...rstChild, Ext.isDefined(v) ? v : '');
    ext-all-debug.js (line 46905)
    ae[cancel === true ? "cancelEdit" : "completeEdit"] is not a function
    [Break on this error] ae[cancel === true ? 'cancelEdit' : 'completeEdit']();
    ext-all-debug.js (line 46932)
    ae.realign is not a function
    [Break on this error] ae.realign(true);
    Seems like the problem maybe related to :
    http://www.sencha.com/forum/showthre...not-a-function
    http://www.sencha.com/forum/showthre...not-a-function

    How to fix:
    use :
    Code:
    {
     dataIndex: 'DATABASE_LOG_MODE'
    ,header: 'Log Mode'
    //,editable: true
    ,editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
    .......

    Awesome ux.

    Jack
    Last edited by Jack_S; 16 Oct 2010 at 7:35 PM. Reason: Found Reason for error

  9. #19
    Ext User
    Join Date
    Oct 2010
    Location
    Rapid City, SD
    Posts
    10
    Vote Rating
    0
    hypergolic is on a distinguished road

      0  

    Default


    Thanks guys, the improved property grid is working great for me.

  10. #20
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    372
    Vote Rating
    3
    ttbgwt is on a distinguished road

      0  

    Default


    Do you have example using this extension, with a data store? I tried populating an array store and made sure the ids matched up, but the grid just doesnt get the data from the store. When the store load its data, do I have to manually load the property grid? Any samples would be greatly appreciated. Thanks