'rownumberer'에 해당되는 글 1건

  1. 2013.05.15 [Javascript] ExtJS - Grid + Checkbox + Paging

[Javascript] ExtJS - Grid + Checkbox + Paging

ITWeb/개발일반 2013. 5. 15. 17:10

ExtJS API )

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.Panel

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.selection.CheckboxModel

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.RowNumberer

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.toolbar.Paging


아래 사용 예가 best 는 아닐 수 있으며, 실제 동작 하는 코드에 대한 참고용으로 사용하시면 될 것 같습니다.

생각 보다 ExtJS 의 경우 버전 별로 API 가 좀 다르기도 하고 요구하는 기능에 대한 API 문서가 정말 자세히 나와 있지도 않아 노가다를 많이 하게 되니 동작 하는 코드만으로도 다양하게 적용 가능 할 것으로 판단 됩니다.


사용 예)

columnArr[0] = Ext.create("Ext.grid.RowNumberer", {

            width:60,

            renderer: function(value, appearance, record, rowIndex) {

                var columnIndex = ESDataListControl.totalDocSize - (ESDataListControl.pageSize*(ESDataListControl.currPage-1)) - rowIndex;

                return columnIndex;

            }

        });


var grid = new Ext.create("Ext.grid.Panel", {

            id: "esDataViewGridId",

            title: "Elasticsearch Data Management Grids",

            layout: "fit",

            store:  ESDataListControl.dataStore,

            queryMode: "local",

            autoRender: "true",

            autoShow: "true",

            autoResize: "true",

            loadMask : true,

            selModel:Ext.create("Ext.selection.CheckboxModel", {

                checkOnly: true,

                listeners : {

                    deselect: function(model, record, index) {

                        delete ESDataVar.ids[record.raw._id];

                        console.log(ESDataVar.ids);

                    },

                    select: function(model, record, index) {

                        ESDataVar.ids[record.raw._id] = {"_index":"", "_type":"", "_id":""};

                        

                        ESDataVar.ids[record.raw._id]._index = record.raw._index;

                        ESDataVar.ids[record.raw._id]._type = record.raw._type;

                        ESDataVar.ids[record.raw._id]._id = record.raw._id;

                        console.log(ESDataVar.ids);                        

                    }

                }

            }),

            columns: columnArr,

            renderTo : "esDataViewGridPanel",

            bbar: new Ext.PagingToolbar({

                    pageSize: ESDataListControl.pageSize,

                    store: ESDataListControl.dataStore,

                    displayInfo: true,

                    displayMsg: "Displaying topics {0} - {1} of {2}",

                    emptyMsg: "No topics to display",

                    items:[ 

                            "-",

                            {

                                pressed: true,

                                enableToggle: true,

                                text: "Delete",

                                cls: "x-btn-text-icon details",

                                toggleHandler: function(btn, pressed){

                                    ESDataListControl.deleteDocFromIds();

                                }

                            }

                        ],

                    moveFirst : function () {

                        ESDataListControl.currPage = 1;

                        ESDataListControl.getPagingSearchMatchAll();

                    },

                    moveLast : function () {

                        ESDataListControl.currPage = ESDataListControl.endPage;

                        ESDataListControl.getPagingSearchMatchAll();

                    },

                    moveNext : function () {

                        ESDataListControl.currPage++;

                        ESDataListControl.getPagingSearchMatchAll();

                    },

                    movePrevious : function () {

                        ESDataListControl.currPage--;

                        ESDataListControl.getPagingSearchMatchAll();

                    },

                    listeners: {change : function(thisd, params) {

                            console.log("pagingToolbar listener");

                        }

                    }

                })

            });


좀 더 상세한 적용을 위해서는 소스코드를 보시면 좋겠지만,

그냥 객체에 대한 attribute 와 property 를 모두 디버깅해서 필요한 API 를 찾아 사용하는 것도 방법 일 수 있습니다.

다만 시간과 노력이 많이 듭니다. ^^;

: