Ext.data.XmlReader를 사용하여 파싱한후 숫자 데이터를 정렬해보면 숫자를 문자로 인식하여 정렬이 되기때문에 제대로 정렬되지 않는다.

아래와 같이 파싱할때 타입을 정해주면 형변환을 한후 Store에 데이터를 넣기때문에 숫자 정렬이 된다.

var rcSTSGridListStore = new Ext.data.Store( {
            url : dataUrl,
            remoteSort: false,   
            reader : new Ext.data.XmlReader( {
                record : 'detail'
            }, [ 'objectSeq',
                'parentSeq',
                'objectName',
                'objectType',
                'refDetailUrl',
                'refChildUrl',
                'objectHostStatus',
                'objectServiceStatus',
                'objectIp',
                { name: 'cpu', type: 'float' },
                { name: 'memory', type: 'float' },
                { name: 'traffic', type: 'float' },
                { name: 'storage', type: 'float' },
                'connection',
                'dbdDeletedYN',
                'monitoringYN',
                'notificationYN',
                'svcTypeCode'
               ])
        });

신고
Posted by genius3k

Form에서 전화번호나 헨드폰번호를 입력받을때 마다 CompositeField를 사용해서 3개의 칸을 만들어야 했던 불편함을 없애기 위해 CompositeField를 상속받아 Component을 만들었다.

/**
 * 공통으로 사용하기 위한 Ext-JS 필드
 */
Ext.namespace('Ext.custom.form');

var phoneHeaders = {
 tel : [ [ '02', '02' ], [ '031', '031' ], [ '032', '032' ] ],
 phone : [ [ '010', '010' ], [ '011', '011' ], [ '016', '016' ],
   [ '018', '018' ], [ '019', '019' ] ]
};

Ext.solbox.form.TelField = Ext.extend(Ext.form.CompositeField, {
 items : [],
 initComponent : function() {
  Ext.solbox.form.TelField.superclass.initComponent.call(this);
 },
 submitValue : true,
 constructor : function(config) {
  Ext.solbox.form.TelField.superclass.constructor.call(this, config);
  this.width = 170;
 this.width = 370;
 var telField = this;
 var orgValue;
 if (config.value != null) {
  orgValue = config.value.split('-');
 }
 try {
  this.items = [ {
   id : telField.tid,
   xtype : 'textfield',
   hidden:true,
   setValue : function(v) {
    if (this.emptyText && this.el && !Ext.isEmpty(v)) {
     this.el.removeClass(this.emptyClass);
    }
    Ext.form.TextField.superclass.setValue.apply(this, arguments);
    this.applyEmptyText();
    this.autoSize();
    var orgValue = this.value.split('-');
    telField.items.items[1].setValue(orgValue[0]);
    telField.items.items[3].setValue(orgValue[1]);
    telField.items.items[5].setValue(orgValue[2]);
    return this;
   }
  }, {
   xtype : 'combo',
   name : this.fieldLabel,
   width : 60,
   valueField : 'value',
   displayField : 'title',
   mode : 'local',
   editable : false,
   lazyRender : true,
   value : orgValue[0],
   typeAhead : true,
   submitValue : false,
   triggerAction : 'all',
   store : new Ext.data.ArrayStore( {
    fields : [ 'value', 'title' ],
    data : phoneHeaders[config.ttype]
   })
  }, {
   xtype : 'displayfield',
   value : '-'
  }, {
   xtype : 'numberfield',
   name : this.fieldLabel,
   submitValue : false,
   width : 50,
   maxLength : 4,
   listeners : {
    'blur' : function() {
     var value = telField.items.items[1].getValue();
     value = value + '-' + telField.items.items[3].getValue();
     value = value + '-' + telField.items.items[5].getValue();
     Ext.getCmp(telField.tid).setValue(value);
    }
   }
  }, {
   xtype : 'displayfield',
   value : '-'
  }, {
   xtype : 'numberfield',
   name : this.fieldLabel,
   submitValue : false,
   width : 50,
   maxLength : 4,
   value : '',
   listeners : {
    'blur' : function() {
     var value = telField.items.items[1].getValue();
     value = value + '-' + telField.items.items[3].getValue();
     value = value + '-' + telField.items.items[5].getValue();
     Ext.getCmp(telField.tid).setValue(value);
    }
   }
  } ];
 } catch (e) {
  alert('check fieldNames or ttype');
 }
}
});

Ext.reg('telfield', Ext.solbox.form.TelField);

신고
Posted by genius3k
rowclick 이벤트를 재정의 해주면 된다

obj : 그리드 객체
index: 클릭된 rowindex
e : Event 객체

Grid 객체.on('rowclick',function(obj,index,e){
        var dataObj = obj.getStore().data.items[index].data;
        alert(dataObj.속성명);
    });
신고
Posted by genius3k

아래의 코드를 ext-all.css 밑에 넣어서 재정의해주면된다;;
이리 간단한 것을;;;;
.x-grid3-row td
{
    -moz-user-select:text;
    -khtml-user-select:text;
}

신고
Posted by genius3k

var contactForm = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        id:'contactForm',
        layout:'absolute',
        autoScroll : true,
        border:false,
        url:'save-form.php'
        defaultType: 'textfield',
        width:'100%',
        reader : new Ext.data.XmlReader({
             record : 'detail',
             success: '@success'
         }, [
             {name: 'contacttype', mapping:'userContactType'},
             {name: 'audioAlert', mapping:'userAudioAlert'},
             {name: 'popupAlert', mapping:'userPopupAlert'},
             {name: 'emailAlert', mapping:'userEmailAlert'}   //<-- xml  파싱
        ]),items:[{x: 140,y: 160,xtype:'radiogroup',id:'contacttype',width:500,vertical:false,
items:[
                              {boxLabel:'combo1',name:'contacttype',inputValue:'1',value:'1',id:'contacttypeB'}, //inputvalue의 값이 xml의 값과 일치하면 체크된다.
                              {boxLabel:'combo2',name:'contacttype',value:'2',inputValue:'2',id:'contacttypeI'},
                              {boxLabel:'combo3',name:'contacttype',value:'3',inputValue:'3',id:'contacttypeC'}
                                ]}
                {x: 140,y: 285,boxLabel:'check1',xtype:'checkbox',name:'audioAlert',id:'alerttypeA'},
                {x: 240,y: 285,boxLabel:'check2',xtype:'checkbox',name:'popupAlert',id:'alerttypeP'},
                {x: 340,y: 285,boxLabel:'check3',xtype:'checkbox',name:'emailAlert',id:'alerttypeE'}
         ],
신고
Posted by genius3k
Grid Panel의 store객체에 새로고침 버튼을 클릭하거나 이전 다음페이지 버튼을 클릭할때 호출하는 URL주소와 Param값이 지정되어있다.
이 값들을 수정하는 방법은 다음과 같다.

1.Store객체에 로드함수를 호출하면서 Param을 설정
GridPanel.store.load({params:{
             url:'주소',
             start:0,
             limit:20,
             searchtype:0,
             keywordType:keyword
        }});

2.Store의 setBaseParam을 사용하여 Param값을 수정
GridPanel.store.setBaseParam('url','주소');
GridPanel.store.setBaseParam('start',0);
GridPanel.store.setBaseParam('limit',20);
GridPanel.store.setBaseParam('searchtype',0);
GridPanel.store.setBaseParam(keywordType,keyword);
GridPanel.store.reload();
신고
Posted by genius3k

Grid Panel에서 이벤트 발생했을때 데이터를 갱신 시키는 방법은 아래와 같다
GridPanel.store.load({params:{
             start:0,
             limit:20,
             searchtype:0,
             keyword:keyword         <-- 내가 원하는 param을 추가하고 뺄수있다
        }});

위와 같이 하면 Grid Panel의 Store 생성시 설정했던 주소에 start,limit,searchtype,keyword의 param을 넘긴다.

하지만 PagingToolbar에 있는 다음페이지,이전페이지 버튼을 클릭할 경우
start와 limit만 넘어가고 keyword의 값이 넘어가지 않아 검색 결과가 제대로 나오지 않는다.

이런 현상을 다음과 같이 수정하면 올바른 결과를 받을 수있다.

Store.on('beforeload',function(storeObj,option){
   if(Ext.getCmp('icsServicekeyword').getValue() != null){
    var keyword = Ext.getCmp('icsServicekeyword').getValue();
    option.params.searchtype=0;
    option.params.keyword=keyword;
   }
  });

GridPanel에 등록되어있는 store 객체에 beforeload이벤트를 정의하여 GridPanel이 로드되기전에 param을 수정하는 것이다.
option의 params에 위와 같이 searchtype과 keyword를 추가하면 다음,이전페이지 클릭시 param정보에 추가되서 넘어간다.
신고
Posted by genius3k
Extjs의 샘플중 번호를 매기는 게 없어서 만들어봤다.

Grid Panel의 columns 속성에 다음과 같이 번호 컬럼을 추가한다.
{
    header : '번호',
    width : 100,
    dataIndex : 'totCnt', <--전체 글 수
    align : 'center',
    sortable : true,
    renderer:function(value, metaData, record, rowIndex, colIndex, store) {
//전체 글수 - (시작글수+글의 줄번호)
         return parseInt(value)-(parseInt(store.lastOptions.params.start)+parseInt(rowIndex));
      }
   }
신고
Posted by genius3k

function getNodeContents(node) {
 var s = "";
 if(node.childNodes.length > 0)
 { 
  s+="[";
  for(var i=0; i<node.childNodes.length; i++) {
   var id = node.childNodes[i].id;
   var text = node.childNodes[i].text; 
   var text = node.childNodes[i].변수명;  <-- tree의 json값중 추가적으로 넣은 값을 가져올려면 다음을 추가하여 가져온다.
   var hasChild = node.childNodes[i].childNodes.length>0?true:false;
   if(i > 0){s+=",";}
   s+= "{'id':'"+id+"'\n"
     +",'text':'"+text+"'\n";
     if(hasChild){
      s+=",'leaf':false\n";
      s+=",children:";
     }else{
      s+=",'leaf':true\n";
     }
   s += getNodeContents( node.childNodes[i]);
   s += "}";
  }
  s+="]";
 }
 return s;
}
신고
Posted by genius3k

Test = Ext.extend(Ext.tree.TreeLoader, {
 processResponse : function(response, node, callback, scope){       
  var json = response.responseText;       
  try {           
   var o = response.responseData || Ext.decode(json);
   o=o.XmlRoot.tree; <--o변수에 전체노드의 객체가 저장된다. o변수에 내가 원하는 노드로 재정의한다.
   node.beginUpdate();           
   for(var i = 0, len = o.length; i < len; i++){
    var n = this.createNode(o[i]);               
    if(n){                   
     node.appendChild(n);               
    }           
   }           
   node.endUpdate();           
   this.runCallback(callback, scope || node, [node]);
  }catch(e){           
   this.handleFailure(response);       
  }   
 }
});
위와 같이 선언한다.

그후
Treepanel생성시 loader에 다음 객체를 넣어준다.
var treeLoader = new Test ({
        dataUrl : 주소,
        uiProviders:{
            'col': Ext.ux.tree.ColumnNodeUI
        }
    });

신고
Posted by genius3k

티스토리 툴바