Clear Up
SharpKit Reference

Grid Class

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 Properties. Example usage:

  
    Ext.create('Ext.grid.property.Grid', {
            title: 'Properties Grid',
            width: 300,
            renderTo: Ext.getBody(),
            source: {
            "(name)": "My Object",
            "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
            "Available": false,
            "Version": 0.01,
            "Description": "A test object"
            }
            });
            

Namespace: Ext.grid.property

Constructors

Fields

Name Description
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:
var grid = new Ext.grid.property.Grid({
            // Custom editors for certain property names
            customEditors: {
            evtStart: Ext.create('Ext.form.TimeField', {selectOnFocus: true})
            },
            // Displayed name for property names in the source
            propertyNames: {
            evtStart: 'Start Time'
            },
            // Data object containing properties to edit
            source: {
            evtStart: '10:00 AM'
            }
            });
            
customRenderers An object containing name/value pairs of custom renderer type definitions that allow the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and associated with the type of the value. The name of the renderer type should correspond with the name of the property that it will render. Example usage:
var grid = Ext.create('Ext.grid.property.Grid', {
            customRenderers: {
            Available: function(v){
            if (v) {
            return '<span style="color: green;">Yes</span>';
            } else {
            return '<span style="color: red;">No</span>';
            }
            }
            },
            source: {
            Available: true
            }
            });
            
nameColumnWidth Specify the width for the name column. The value column will take any remaining space. Defaults to: 115
nameField The name of the field from the property store to use as the property field name. This may be useful if you do not configure the property Grid from an object, but use your own store configuration. Defaults to: "name"
propertyNames An object containing custom property name/display name pairs. If specified, the display name will be shown in the name column instead of the property name.
source A data object to use as the data source of the grid (see setSource for details).
valueField The name of the field from the property store to use as the value field name. This may be useful if you do not configure the property Grid from an object, but use your own store configuration. Defaults to: "value"

Methods

Name Description
getSource() Gets the source data object containing the property data. See setSource for details regarding the format of the data object.
removeProperty(JsString) Removes a property from the grid.
setProperty(JsString, object, object) Sets the value of a property.
setSource(object) 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 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 source config value. Example usage:
grid.setSource({
            "(name)": "My Object",
            "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),  // date type
            "Available": false,  // boolean type
            "Version": .01,      // decimal type
            "Description": "A test object"
            });
            
© Copyright 2005-2011 SharpKit. All rights reserved.