'EXTJS'에 해당되는 글 5건

  1. 2013.05.15 [Javascript] ExtJS - Grid + Checkbox + Paging
  2. 2013.05.15 [JavaScript] ExtJS - Ext.data.Store
  3. 2013.05.15 [JavaScript] ExtJS - ComboBox
  4. 2013.05.15 [JavaScript] ExtJS - MessageBox
  5. 2013.05.09 [JavaScript] ExtJS & JQuery - Ajax 사용하기

[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 를 찾아 사용하는 것도 방법 일 수 있습니다.

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

:

[JavaScript] ExtJS - Ext.data.Store

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

ExtJS API : http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store

여러 형태의 데이터를 저장.

주로 json 형태의 데이터를 처리 또는 key:value 처리.


사용 예) ajax 로 이미 데이터를 loading 한 후 local data 를 넘겨 주는 방식 (ajax 호출을 따로 하고 싶지 않을 경우 proxy 부분에서 직접 구현 해도 됨)

ESDataListControl.dataStore = new Ext.create("Ext.data.Store", {

                        autoLoad: true,

                        queryMode: "local",

                        fields: columns,

                        pageSize: ESDataListControl.pageSize,

                        currentPage: ESDataListControl.currPage,

                        proxy: {

                            type: "memory",

                            reader: {

                                type: "json",

                                totalProperty: "hits.total",

                                root: "hits.hits"

                            }

                        },

                        data:ESDataListControl.jsonResult

                    });

        ESDataListControl.totalDocSize = ESDataListControl.dataStore.getTotalCount();


API 간단 설명)

- fields : grid 에 보여 줄때 column 명에 해당 하는 항목

- totalProperty : 읽어 온 데이터의 총 수

- root : 읽어 온 json string 에서 데이터에 해당하는 root key name

예) { hits:{total:111, hits:{data:[...]}}}

:

[JavaScript] ExtJS - ComboBox

ITWeb/개발일반 2013. 5. 15. 16:49

ExtJS API : http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.ComboBox

html form 요소 중 <select> 요소를 만들어 줍니다.

그렇다고 실제 <select> 객체가 들어가지는 않으니 유의 하세요.


사용 예)

indices[0] = {"optText":"all", "optValue":"all"};


ESDataIndexListControl.indiceStore = Ext.create("Ext.data.Store", {

            fields: ["optText", "optValue"],

            data: indices

        });



        Ext.create("Ext.form.ComboBox", {

            id: "indicesCombo",

            fieldLabel: "Index List",

            store: ESDataIndexListControl.indiceStore,

            queryMode: "local",

            displayField: 'optText',

            valueField: 'optValue',

            typeAhead: true,

            editable: false,

            triggerAction: "all",

            value: ESDataIndexListControl.indiceStore.getAt(0).get('optValue'),

            renderTo: "esDataIndexSelectionViewPanel", // esDataIndexAliasSelectionViewPanel

            listeners:{ 

                'select': function(combo, record, index) {

                    ESDataListControl.indiceName = record[0].data.name;

                    ESDataListControl.currPage = 1;

                    ESDataListControl.getIndiceSearchMatchAll();

                    Ext.getCmp("aliasesCombo").setValue(ESDataIndexListControl.aliasStore.getAt(0).get('optValue'));

                }

            }

        });



API 간단 설명)

- optText 는 selectbox 에서 options.text 에 해당.

- optValue 는 selectbox 에서 options.value 에 해당.

- data.Store 에서 fields 부분은 combobox 에서 사용할 이름으로 selectbox 의 value 와 text 로 구분 함.

:

[JavaScript] ExtJS - MessageBox

ITWeb/개발일반 2013. 5. 15. 16:37

ExtJS API : http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.window.MessageBox

다양한 메시지 창을 만들어 줍니다.

흔히 사용하는 window.alert/confirm ...


title, msg, [fn], [scope] ) :


사용 예)

Ext.MessageBox.alert("Fetch Index List Messages.", "failed request[URL:"+url+"][HTTP Status:"+response.status+"]");


:

[JavaScript] ExtJS & JQuery - Ajax 사용하기

ITWeb/개발일반 2013. 5. 9. 10:32

[JQuery]

URL : http://jquery.com/download/

API : http://api.jquery.com/category/ajax/

Version : 1.9.1


[Code]

- 초간단 Post 예제 이며, Get 은 Query String 으로 넘기시면 됩니다. 또는 type 을 변경해 주세요.

function getSearchMatchAllJquery(){

var host = "localhost";

var port = "9200";

var currentPage = $('#currentPage').val();

var pageSize = $('#pageSize').val();

var pageLinkSize = $('#pageLinkSize').val();

var indices = $('#indices').val();


$.ajax({

type: "POST",

url: "/elasticsearch/data/getSearchMatchAll.do",

data: {

                host:host,

                port:port,

currentPage:currentPage,

pageSize:pageSize,

pageLinkSize:pageLinkSize,

indices:indices

}

}).done(function( result ) {

          $("#matchAllView").html(result );

});

}



[ExtJS]

URL : http://www.sencha.com/products/extjs/download/ 

API : http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Ajax

Version : 4.2


[Code]

- Post 예제 이며, Get 방식은 아래 method 를 변경하시면 됩니다.

function getSearchMatchAllExtJs() {

    var host = "localhost";

    var port = "9200";

    var currentPage = $('#currentPage').val();

    var pageSize = $('#pageSize').val();

    var pageLinkSize = $('#pageLinkSize').val();

    var indices = $('#indices').val();

    

Ext.Ajax.request({

          url: '/elasticsearch/data/getSearchMatchAll.do',

          method: 'POST',

          success: function(response, opts) {

              var obj = Ext.decode(response.responseText);

  $("#matchAllView").html(obj );

          },

          failure: function(response, opts) {

              $("#matchAllView").html(response.status );

          },

          scope: this,

          params: {

host:host,

port:port,

currentPage:currentPage,

pageSize:pageSize,

pageLinkSize:pageLinkSize,

indices:indices

          }

});

}


: