Using senchdomaindpanel in JavaScript to edit cells and change cell colors _ javascript tips

Table functions in ExtJS are very powerful, including sorting, caching, dragging, hiding a column, automatically displaying a row number, column summary, cell editing, and other practical functions, this article introduces how to use senchreceivdpanel to edit cells, change cell colors, and learn about GridPanel in JavaScript.

The table function in ExtJS is very powerful, including sorting, caching, dragging, hiding a column, automatically displaying a row number, column summary, cell editing, and other practical functions.

The table is defined by Ext. grid. GridPanel and inherited from Panel. Its xtype is grid. In ExtJS, table Grid must contain column definition information and specify the table's data storage Store. The column information of a table is composed of Ext. grid. column (previously created by Ext. grid. columnModel), while the table data storage is defined by Ext. data. store definition. Data Storage is divided into JsonStore, SimpleStroe, and GroupingStore based on different parsed data.

The following Code introduces the sencha gridpanel Editing Unit. The specific code is as follows:

{Xtype: 'gridpanel ', region: 'north', height: 150, title: 'My Grid Panel', store: 'A _ Test_Store ', columns: [{xtype: 'gridcolumn', dataIndex: 'name', text: 'name', editor: {xtype: 'textfield '}}, {xtype: 'gridcolumn', dataIndex: 'content ', text: 'content'}, {xtype: 'gridcolumn', dataIndex: 'time', text: 'time'}], plugins: [Ext. create ('ext. grid. plugin. cellEditing ', {clicksToEdit: 1, // click the cell to edit listeners: {beforeedit: {fn: me. onCellEditingBeforeEdit, scope: me}, validateedit: {fn: me. onCellEditingValidateedit, scope: me }})]} onCellEditingBeforeEdit: function (editor, e, eOpts) {// used for Dynamic assignment. normally, this event is not required. e. record. data [e. field] = "my test"; e. value = "my test"; e. record. commit (); // submit, not submitted invalid} onCellEditingValidateedit: function (editor, e, eOpts) {if (e. row = 1) // verification logic {e. cancel = true; // cancel e. record. data [e. field] = e. value;} e. record. commit ();}

The following code changes the cell color of the sencha gridpanel.

If the title column contains a review, it is green, and the rejection is Red:

{Xtype: 'gridcolumn ', renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {metaData. tdAttr = 'data-qtip = "'+ record. data. content + '"'; if (record. data. content. indexOf ('approved ')! =-1) {metaData. style = "color: green";} else if (record. data. Content. indexOf ('denied ')! =-1) {metaData. style = "color: red";} return value;}, width: '*', dataIndex: 'title', text: 'title '}