Language/Javascript

Ext js 4.2 관련

do yeon 2019. 10. 2. 11:24
반응형

* grid의 첫번째 rowfocus

grid.getSelectionModel().selectFirstRow();

 

* grid의 현재 row record(storerecord를 말함)

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();

 

* GridPanelviewConfig 속성을 활용하여 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

- stringyyyy/mm/dd 형식으로 변환

renderer: function(val){return new Date().format('Y/m/d')}

var date = Ext.Date.format(date, 'Ymd');

 

출처 : https://m.blog.naver.com/jhduli/90120181707

반응형