EXT core API details Ext. widgets (20)-grid (2)

Ext. Grid. editorgridpanel
Editable data table
Config {
Clickstoedit: Number // click a few times to start editing. The default value is 2.
}

Method
Editorgridpanel ()
Constructed. It should be editorgridpanel (Object config)
Startediting (number rowindex, number colindex): void
Stopediting (): void
Start to stop editing

Event
Afteredit: (Object E)
Beforeedit: (Object E)
Validateedit: (Object E)

Next we will extend the example to apply editorgridpanel // to define an array.
VaR arr = [
['Bill ', 'gardener', '2017-01-02',-10, true],
['Ben', 'horticulturalist', '2017-01-03 ',-2007, false],
['You', 'gardener', '2017-02-02 ', 0, true],
['Ta', 'gardener', '2017-01-04 ', 13, false],
['I', 'horticulturalist', '2017-01-05 ', 2007, false]
];
VaR reader = new Ext. Data. arrayreader (
...{},
// Define the ing between arrays and record
[
... {Name: 'name '},
... {Name: 'occupation', mapping: 1 },
... {Name: 'date', type: 'date', dateformat: 'Y-m-d'}, // convert the date in the specified format
... {Name: 'water', type: 'water '},
... {Name: 'bool ', type: 'bool '}
]
);
// Generate metadata
VaR store = new Ext. Data. Store (...{
Reader: Reader
});
Store. loaddata (ARR );

// Custom editable columns copied from the ext example, but init is depressing
Ext. Grid. checkcolumn = function (config )...{
Ext. Apply (this, config );
If (! This. ID )...{
This. ID = ext. ID ();
}
This. Renderer = This. Renderer. createdelegate (this );
};
// Rewrite three methods to capture mousedown and modify data
Ext. Grid. checkcolumn. Prototype = ...{
Init: function (GRID )...{
This. Grid = grid;
This. Grid. On ('render', function ()...{
VaR view = This. Grid. getview ();
View. mainbody. On ('mouseunder', this. onmousedown, this );
}, This );
},
Onmousedown: function (E, T )...{
If (T. classname & T. classname. indexof ('x-grid3-cc-'+ this. ID )! =-1 )...{
E. stopevent ();
VaR Index = This. Grid. getview (). findrowindex (t );
VaR record = This. Grid. Store. getat (INDEX );
Record. Set (this. dataindex ,! Record. Data [This. dataindex]);
}
},

Renderer: function (V, p, record )...{
P.css + = 'x-grid3-check-col-td ';
Return '<Div class = "x-grid3-check-col' + (V? '-On': '') + 'x-grid3-cc-'+ this. ID +'"> & #160; </div> ';
}
}

// Bind to the bool Field
VaR checkcolumn = new Ext. Grid. checkcolumn (...{
Header: "Boolean ",
Dataindex: 'bool'
});
/**//*
Configure column information now, to localize the date selector, include the ext-lang-zh_CN.js and modify date. daynames = ["day", "one", "two", "three", "four", "five", "Six"];
Add oktext: "OK", canceltext: "cancel" to Ext. Apply (ext. datepicker. prototype ";
*/
VaR Col = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (... {header: 'sequence number ', width: 30 }),
... {Header: 'name', sortable: True, dataindex: 'name '},
... {Header: 'occupation', sortable: True, dataindex: 'occupation '},
...{
ID: 'datacol ',
Header: 'date ',
Sortable: True,
Dataindex: 'date', Renderer: Ext. util. format. daterenderer ('y, M, dday'), // formatted display
Editor: New Ext. Form. datefield ()
},

... {Header: 'value
', Sortable: True, dataindex: 'float', Renderer: formatfloat, align:
'Right', Editor: New Ext. Form. numberfield ()}, // custom display mode, right aligned
Checkcolumn // This "select Box Column" looks pretty, but it is actually implemented by modifying the background image.
]);

// Configure view information
VaR view = new Ext. Grid. gridview (... {forcefit: True, sortasctext: 'ordinal ', sortdesctext: 'descending '});
View. columnstext = 'column display/hiding ';
// Now let's see if the Editable data table format can be used.
VaR grid = new Ext. Grid. editorgridpanel (...{
El: Ext. getbody (),
Height: 200,
Width: 400,
Store: store,
CM: Col,
View: View
});
// Why does the init not need to be used in the original example?
Checkcolumn. INIT (GRID );
Grid. Render ();

Function formatfloat (VAL )...{
VaR bgcolor;
If (Val> 0 )...{
Bgcolor = '# ff0000 ';
} Else if (Val <0 )...{
Bgcolor = '#00ff00 ';
}
Else ...{
Bgcolor = '#000000 ';
}
Return (['<span style = "color:', bgcolor, '">', Val, '</span>']. Join (''));
}

Ext. Grid. propertygrid
Attribute Table. inherited from editorgridpanel. users who are used to ide will like this simple Attribute Table,

Config {
Customeditors: Object // custom attribute Editor
Source: object // Data Source
}

Method
Propertygrid (Object config)
Structure

Getsource (): Object
Setsource (Object source): void
Obtain and set the data source

Event
Beforepropertychange: (Object source, string recordid, mixed value,
Propertychange: (Object source, string recordid, mixed value, mixed

Similarly, a simple example is used to complete propertygrid learning.
VaR grid = new Ext. Grid. propertygrid (...{
El: Ext. getbody ()
, Height: 200
, Width: 400
, Viewconfig:... {forcefit: true}
, Customeditors :...{
'Age': New Ext. Grid. grideditor (New Ext. Form. numberfield ())
}
, Source :...{
'Name': 'blackant'
, 'Age': 100
}
});

Grid. source ['gender '] = 'male ';
Grid. customeditors ['gender '] = new Ext. Grid. grideditor (New Ext. Form. ComboBox (...{
Editable: false
, Triggeraction: 'all'
, Store: New Ext. Data. simplestore (...{
Fields: ['gender'],
Data: [['male'], ['female]
})
, Displayfield: 'gender'
, Forceselection: True
, Mode: 'local'
}));
Grid. Render ();

The selection mode is easy to use and skipped. As for other extensions, you have time to study them. The first step is to learn how to use them first.