当前位置: 首页 > 工具软件 > Backgrid.js > 使用案例 >

extjs中grid的用法(查,增,删,改)

笪智志
2023-12-01
  this.store = Ext.create('Ext.data.Store', {});
  this.grid = Ext.create('Ext.grid.Panel', {})

获取Ext.grid.Panel中的所有值:(一般用在对grid表进行操作)

this.grid.getStore().data.items 

获取ext.grid.Panel 中某一行的的数据

this.store.getAt(j)

向Ext.grid.panel中添加一行数据(增)

var store=this.grid.getStore(); 
var data=[{
'id':'',
'name':'testrow',
'email':'testrow@.com',
'phone':'123456'
}];
store.insert(0,data);//可以自定义在stroe的某个位置插入一行数据。
//store.loadData(data,true);//在store的最后添加一行数据
cellEditing.cancelEdit();
cellEditing.startEditByPosition({row:0,column:0});

移出Ext.grid.Panel中某行值(删)

   {
     xtype: 'actioncolumn',
     width: 30,
     sortable: false,
     menuDisabled: true,
     items: [{
              iconCls: 'ext_delete',
              tooltip: '移除',
              scope: this,
              handler: this.onGridDeleteBtnClick
            }]
   },
  onGridDeleteBtnClick: function (grid, rowIndex, colIndex) {
            grid.getStore().removeAt(rowIndex);//移除
    },

修改Ext.grid.Panel中某一列中所有的值(改)

 this.grid.getStore().each(rec =>{
            rec.data.purchase_price = 11;
            rec.commit();
        });

修改Ext.grid.Panel中某行中某一列的字段值(改)

   this.grid.on('edit', function(editor, e) {
            if (e.field == 'purchase_price') {
                e.record.data.discount = parseFloat(e.record.data.purchase_price/e.record.data.retail_price).toFixed(2);
            }//purchase_price和retail_price为grid中的字段值
            if (e.field == 'discount'){
                e.record.data.purchase_price = parseFloat(e.record.data.discount*e.record.data.retail_price).toFixed(2);
            }
            e.record.commit();
        });
 类似资料: