Language/Javascript
Ext js 4.2 관련
do yeon
2019. 10. 2. 11:24
반응형
* grid의 첫번째 row에 focus
grid.getSelectionModel().selectFirstRow();
* grid의 현재 row record(store의 record를 말함)
var record = grid.getSelectionModel().getSelected();
* grid 다중 row 선택
var grid = {
xtype: 'grid',
simpleSelect : true,
columns: [
.....
],
listeners: {
select: {
fn: function(grid, record, rowIndex){
}
},
deselect: {
fn: function(sm, selectedRcord){
}
}
}
};
* current row(editrogridpanel인 경우)
var currow = grid.activeEditor.row;
* record가져오기
var gridStore = Ext.data.StoreManager.lookup('gridStore');
* record 복사
var record = grid1.getStrore().getAt(rowIndex);
grid2.getStore().add(record);
* grid에서 선택한 row 데이터 가져오기(선택한 전체 row의 데이터)
var sel = new Array();
//현재 row record : grid.getSelectionModel().getSelected();
var records = grid.getSelectionModel().getSelections();
for(int i = 0; i < records.length; i++){
sel.push(records[i].data.id);
}
* grid에서 row에 이미지 넣기
function renderIcon(val){
return "<img src='image_name.jpg'/>" + val; //html 형식으로 return
}
var grid = new Ext.grid.GridPanel({
columns : [
id : 'filename',
header : 'fileName',
renderer : renderIcon, <--- 함수 호출
....
]
});
* 컬럼의 필드명 가져오기
var record = grid.getStore().getAt(rowIndex); // 레코드의 Row를 가져온다.
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // 컬럼의 필드명을 가져온다.
var data = record.get(fieldName); // 컬럼의 데이터를 가져온다.
* row 컬럼갯수 가져오기
var colcnt = grid.getColumnModel().getColumnCount();
* GridPanel의 viewConfig 속성을 활용하여 row의 값에 따라 css class 적용
this.gird = new Ext.grid.GridPanel({
//....
viewConfig : {
forceFit : true,
getRowClass : function(record, index){
this.data = record.data;
switch(this.data.event){
case '프로제서 정상' :
return 'background-processNormal'
case '프로세서 장애' :
return 'background-precessError';
}
}
});
* columnModel renderer parameter
//날짜 mask return
function rendererDate(data, cell, record, rowIndex, columnIndex, store) {
if (data == "") {
cell.css = "redcell";
return "";
} else {
cell.css = "greencell";
return Ext.util.Format.dateRenderer('d.m.Y').apply(this, [data, cell, record, rowIndex, columnIndex, store]);
}
}
* grid focus
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
* column hidden(show/hide)
var colmodel = grid.getColumnModel();
colmodel.setHidden(2, true);
* row에 색상넣기
var myGrid = new Ext.grid.EditorGridPanel(
store: myStore,
loadMask: true,
columns: cm
});
myGrid.getView().getRowClass = function(record, index, rowParams, store){
if( record.get('col1') > 0 )
rClass = 'edited-row';
else
rClass = 'added-row';
return rClass;
}
클래스
.added-row{
background-color:yellow;
}
.edited-row{
background-color:orange;
}
.unused-row{
background-color:white;
}
* renderer
- string을 yyyy/mm/dd 형식으로 변환
renderer: function(val){return new Date().format('Y/m/d')}
var date = Ext.Date.format(date, 'Ymd');
반응형