ExtJs實現重新整理Grid單個單元格

2021-08-31 16:45:17 字數 3365 閱讀 2232

產生問題背景:

extjs3.2版本

頁面上存在定時重新整理**的功能,而且**中每行又有詳情,當每次重新整理每行時,即執行了record的set方法,詳情都會關閉。剛開始覺得很奇怪。因為我一直覺得,我重新整理一行中的乙個字段的話,那應該是只更新這個欄位的dom就行了。

後台檢視了一下源**原來,每個record資料變化時,其實都是重新生成一條新行的dom。在源**的執行步驟是,先新插入一行,再把舊資料的行dom刪除換。

由於詳情是屬於行的,所以,每次執行record的set後,行重新生成,那麼詳情肯定會刪除掉。

為了解決詳情不關閉這個問題,我們想方法為record自定義乙個replace方法出來。

它的功能是:使用record的replace方法,可以實現單個欄位的更新。

看起來很空間的一句話,可是為了實現這個功能,重寫了extjs很多的「類」才實現了。下面是為了實現這個功能**,

還帶了實現了乙個功能,使用extjs提供的冒泡提示加到**的字段值中。

ext.onready(function()

});//步驟4:

ext.data.record.replace = 'repalce';//定義乙個記錄的替換命令,目前沒有什麼作用

ext.override(ext.data.record,

this.dirty = true;

if(!this.modified);

}if(this.modified[name] === undefined)

this.data[name] = value;//模型更新

this.afterreplace(name,value);//通過store通知gridview檢視更新

},//通過store通知gridview檢視更新方法

afterreplace:function(name,value)

}});

//步驟5:

ext.override(ext.data.store,

//通知檢視更新

this.fireevent('repalce',record,name,value, ext.data.record.replace);

}} );

var mydata = [

['3m co',71.72,0.02,0.03,'9/1 12:00am'],

['alcoa inc',29.01,0.42,1.47,'9/1 12:00am'],

['altria group inc',83.81,0.28,0.34,'9/1 12:00am']

];// example of custom renderer function

function change(val)else if(val < 0)

return val;

}//使用extjs提供的冒泡提示

function titleqtip(val)

// example of custom renderer function

function pctchange(val)else if(val < 0)

return val;

}// create the data store

var store = new ext.data.store(,

reader: new ext.data.arrayreader(,,,

,]

})});

ext.override(ext.grid.gridview,

}else

}//實現單個欄位的更新

document.getelementbyid(index+name).innerhtml = this.cm.getrendererbyid(name).call(this,value);

},//步驟6:

initdata : function(ds, cm)

}if(ds));

}this.ds = ds;

if(this.cm)

if(cm));

}this.cm = cm;

},dorender : function(columns, records, store, startrow, colcount, stripe) ,

meta = {},

column,

record;

//build up each row's html

for (var j = 0, len = records.length; j < len; j++)

if (this.markdirty && record.dirty && ext.isdefined(record.modified[column.name]))

}//set up row striping and row dirtiness css classes

var alt = ;

if (stripe && ((rowindex + 1) % 2 === 0))

if (record.dirty)

rowparams.cols = colcount;

if (this.getrowclass)

rowparams.alt = alt.join(' ');

rowparams.cells = colbuffer.join('');

}return rowbuffer.join('');

}});

var ts = {};

ts.cell = new ext.template('',

//步驟1:本來是開啟在gridview重寫這部分,可是發現**太多,覺得沒有必要,在這裡直接定義為div新增乙個id的屬性即可。

'','');

// create the grid

var grid = new ext.grid.gridpanel(,

columns: [,,

,,

],striperows: true,

autoexpandcolumn: 'company',

height:320,

width:600,

frame:true,

title:'sliding pager',

id:'maingrid',

plugins: new ext.ux.panelresizer(),

bbar: new ext.paging*******()

});grid.render('grid-example');

store.load(});

//alert(document.getelementbyid('1pctchange').innerhtml);

});//測試該功能的**

function change()

ExtJS筆記 Grid實現後台分頁

好記性不如爛筆頭,現在每次碰見問題和覺得應該記錄下來的東西都會保持寫部落格的習慣,今後再次碰見這種問題,就不用把時間浪費了。這段時間用extjs用的多一點,前段時間碰見的分頁問題,今天做個筆記吧。img 為了簡單明瞭,此project使用的是servlet的方式,如果你使用的是struts2或者sp...

extjs的grid實現分頁檢視功能

1.定義store 學生grid var studentstore new ext.data.jsonstore 2.定義grid var grid new ext.grid.editorgridpanel columns new ext.grid.rownumberer bbar new ext....

Extjs學習 Grid例項

首先,乙個 應該有列定義,即定義表頭columnmodel 定義乙個columnmodel,表頭中有四列 var cm new ext.grid.columnmodel cm.defaultsortable true 該columnmodel定義了 的四個列,其每列的名稱和對應的資料鍵。請注意def...