EXT Table Control 2 (updated on April 9, October 11, selected from "pay for learning Ext")

VII. editorgrid

3. Everything is ready. Make a Save button.

{   text:‘保存‘,   handler:function(){             var m = ds.modified.slice(0);             var jsonArray = [];             Ext.each(m,function(item){                     jsonArray.push(item.data);                       }               );     Ext.lib.Ajax.request(          ‘post‘,          ‘grid2.jsp‘,          {success:function(response){                        Ext.Msg.alert(‘信息‘,response.responseText,function(){                         ds.reload();                                    }) ;                         }               },             failure:function(){              Ext.Msg.alert(‘错误‘，‘与后台联系的时候出现你问题‘); },       ‘data=‘+encodeURLComponent(Ext.encode(jsonArray))          );      }  }

The process is like this. first obtain the modified data in DS, put it in JSON, and send it to the background using Ajax. DS. modified is the modified array, and slice (0) is used for cutting. This means that the first element is switched to the last element, which is equivalent to copying your array, this will not affect the original array.

Ext. each (array, FN) contains two parameters: the first parameter is an array and the second parameter is a function. After each is started, every element in the array is cyclically formed, the callback function is then processed one by one. Is a way to simplify the loop.

This section describes the DS parameter prunemodifiedrecords. If this parameter is set to true, the DS will automatically clear the modified record each time the remove or load operation is performed, this prevents the modified information from being added during the next submission.

 

4. ensure the validity of the submitted data.

Here, you can set allowblank: false to restrict the modification of existing data cells. If you create a new row, the data in it cannot be detected. The blank data is also directly submitted, and such invalid data is not available.

So we need to judge before submitting

for(var i =0;i<m.length;i++){   var record = m[i];   var fields = record.fields.keys;     for(var j=0;j<fields.length;j++){     var name = fields[j];     var value = record.data[name];     var colIndex = cm.findColumnIndex(name);     var rowIndex = ds.indexOfId(record.id);     var editor = cm.getCellEditor(colIndex).field;          if(!editor.validateValue(value)){         Ext.Msg.alert(‘提示‘,‘请确保输入的数据正确‘,function(){              grid.startEditing(rowIndex,colIndex);          });          return;    }  }}

Let's repeat:

(1) loop through M to obtain each modified row. var record = m [I] indicates a row, while var fields = record. fields. keys indicates the total number of columns.

(2) loop by column to get the current cell. Obtain the editor used by the column name, Value cell value, colindex column number, rowindex row number, and editor.

(3) After the preparation is complete, we perform verification and use the editor. if the isvalid () method does not exist, the error El does not exist. validatevalue (value) is used for verification. This is the internal implementation method of isvalid.

 

5. Restrict the type so that users can only select the data we provide

To restrict users, we can use numberfield control so that they can only enter numbers, ComboBox can only enter several options, datefield is to select a date, and so on.

We have added some data models to better present the results:

var data = [    [1.1,1,new Date(),true],    [2.2,2,new Date(),false],    [3.3,0,new Date(),true],    [4.4,1,new Date(),false],    [5.5,1,new Date(),true]  ];    

The first column is the number, the second column is the ID corresponding to ComboBox, the third column is the date, and the fourth column is the boolean type.

Now we can set the respective editors for these five columns. The first column is restricted to numbers, not negative numbers, and the number cannot exceed 10.

var cm = new Ext.grid.ColumnModel(      header:"数字列",      dataIndex:"number",      editor: new Ext.grid.GridEditor(            new Ext.form.NumberField(            {allowBlank:false,
             allowNegative:false,
             maxValue;10
                  }               )       )  );

When numberfield is used, only numbers can be entered, and allownegative: false means no minus sign can be entered.

The second column is a little complicated. First we prepare a drop-down list:

var comboData =[ [‘0‘,‘新版ext教程‘], [‘1‘,‘EXT在线支持‘], [‘2‘,‘EXT扩展‘]];

Followed by the CM part of the Code:

{   header:‘选择列‘,   dataIndex:‘combo‘,   editor: new Ext.grid.GridEditor(new Ext.form.ComboBox(          {store:new Ext.data.simpleStore(                  fields:[‘value‘,‘text‘],                  data:comboData),                  emptyText:‘请选择‘,                  mode:‘local‘,                  triggerAction:‘all‘,                  valueField:‘value‘,                  displayField:‘text‘,                  readOnly:true})),         renderer:function(value){         return comboData[value][1];       }},

Renderer is a function we have studied. Some people ask that the ComboBox in editorgrid cannot be normally displayed. In fact, this is because the Renderer function is missing. After all, the editor in editorgrid only works when it is actually edited.

The remaining column names are not described one by one.

VIII. Controls not available in version 2.0

1. propertygrid Attribute Table

This control automatically expands the editorgridpanel, so you can directly edit the content on the right.

var grid = new Ext.grid.PropertyGrid({                   title:‘属性表格‘,                    autoHeight:true,                    width:300,                    renderTo:300,                    source:{                      ‘name‘:‘property‘,
　　　　　　　　　　　　　‘time‘:new Data(Data.parse(‘12/15/2007‘)),                       //......                            }});

Renderto is the specified rendering ID.

(1) Here we will give a brief introduction to the processing of read-only grid operations, which is also a way to characterize the cancellation of a specific operation:

grid.on(‘beforeedit‘,function(e){   e.cancel = true;    return false;  });

(2) Obtain Value Based on name

grid.store.getById(‘name‘).get(‘value‘);

Propertygrid does not provide a method. We can find it through store.

(3) custom editing box

If we need to configure the editor in more detail, the propermeditors of propertygrid allows us to operate on the row of data with the specified ID. Example:

var grid = new Ext.grid.PropertyGrid({   titlie:"属性表格",   autoHeight:true,   width:300,   renderTo:"grid",   customEditors:{          ‘Start Time‘:new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))},        source:{           ‘Start Time‘:‘10:00 AM‘     }});

Customeditors and source are basically the same. The two groups of data with the same name are automatically matched.

2. Cross report

We need to make such an effect, and the data is as follows:

var data = [ [‘1‘,‘male‘,‘name1‘,‘descn1‘], [‘2‘,‘female‘,‘name1‘,‘descn2‘], [‘3‘,‘male‘,‘name1‘,‘descn3‘], [‘4‘,‘female‘,‘name1‘,‘descn4‘], [‘5‘,‘male‘,‘name1‘,‘descn5‘],];

We sort data through Ext. Data. groupingstore and provide it to gridpanel.

var store = new Ext.data.GroupingStore({         reader:reader,         data:data,         groupField:‘sex‘,         sortInfo:{field:‘id‘,direction:‘asc‘}});

The reader and data here are the original ones. groupfield specifies which one is to be grouped and must be set to sortinfo. This parameter requires two items. field is the sorting attribute, direction is the sorting method. ASC is in the forward direction and desc is in the reverse order.

To see the format we need, you also need to set a groupingview.

var grid = new Ext.grid.GridPanel({    store:store,      columns:columns,      view:new Ext.grid.GroupingVIEW(),      renderTo:‘grid‘});

9. Change the size of a table that can be dragged.

Not detailed,

var  rz = new Ext.Resizable(‘grid‘,{       wrao:true,        minHeight:100,       pinned:true,       handles:‘s‘});rz.on(‘resize‘,grid.autoSize,grid);

S (South) can only be dragged.

EXT Table Control 2 (updated on April 9, October 11, selected from "pay for learning Ext")