Sencha1 - Tip

- Ext.Panel의 높이 구하기 : myPanel.container.getHeight()
- dockedItems 첫번째 아이템 타이틀 수정 : this.dockedItems.items[0].setTitle('타이틀수정');
- 오늘날짜구하기 : var currentDate = new Date();
- 문자형날짜값을 날짜형으로 : Date.parseDate(JsonData.data.info.start_date, 'c')
- items 찾기 : writeToolbar.items.get('btnAdd').enable(); / writeToolbar.getChildItemById('btnAdd').disable();
- store record 삭제 : employee_submenu.panel_submenu.getListBox().store.removeAt(2);
- xtype : 'selectfield' option 동적추가 : this.items.get("emp.join").items.get("role").store.add({ text : '슈퍼바이저', value : '01' });

- Ext.data.Store 데이터추가

dataStore = new Ext.data.Store({ // 생략 
dataStore.add({"id": global_user_com_id, "comment": Ext.getCmp("txtComment").getValue()});

- Sencha Ext.XTemplate 데이터 적용시 replace

itemTpl : new Ext.XTemplate(
    '<TPL for=".">',
        '<DIV class=gcomment>',
            '<DIV class=gcomment-title>',
                '<SPAN class=id>{regid}</SPAN><SPAN class=date>{regdate:date("Y년 m월 d일")}</SPAN>',
            '</DIV>', 
            '<DIV class=gcomment-content>',
                '<P>{comment:this.linkify}</P>', 
            '</DIV>', 
        '</DIV>',
    '</TPL>', 
    {
        linkify : function(value) {
            return value.replace(/\n/g, "<br />");
        }
    }
)

- Sencha Ext.XTemplate 데이터 적용시 데이터변환

itemTpl:new Ext.XTemplate(
    '<div class="tweet-bubble">',
        '<div class="tweet-content">',
            '<h1>{title}</h1>',
            '<span>일정 {sdate:this.toDate} ~ {edate:this.toDate}</span>',
        '</div>',
    '</div>',
    '<div class="ttttt">',
        '<p>{insert_date:date("Y년 m월 d일")}</p>',
    '</div>',
    {
        toDate: function(values) {
            return values.substr(0, 4) + '년 ' + values.substr(4, 2) + '월 ' + values.substr(6, 2) + '일';
        }
    }
),              
listeners: {
    selectionchange: function(sel, records) {
        if (records[0] !== undefined) {
            alert(records[0].data.id);
        }
    }
}

Ext.ux.Image

Ext.ux.Image = Ext.extend(Ext.Component, {

    url : Ext.BLANK_IMAGE_URL,  //for initial src value
    
    //cls : 'con_preview',
    
    scale : 1,
    
    style : 'text-align: center;',
    
	html: [
		'<img>'
	],

	initComponent: function() {
		Ext.ux.Image.superclass.initComponent.apply(this, arguments);
		
		this.on('afterrender', this.initViewer, this, {delay: 10, single: true});
		
		this.addEvents('load');
	},
	
	initViewer: function() {
		// retrieve DOM els
		this.imgEl = this.el.down('img');

		this.imgEl.setStyle({
			'-webkit-user-drag': 'none'
			,'-webkit-transform-origin': '0 0'
			,'visibility': 'hidden'
		});

		
		this.el.setStyle({
			//backgroundImage: 'url('+this.previewSrc+')',
			backgroundPosition: 'center center'
			,backgroundRepeat: 'no-repeat'
			,webkitBackgroundSize: 'contain'
		});

		// attach event listeners
		this.mon(this.imgEl, {
			scope: this
			,load: this.onLoad
			//,doubletap: this.onDoubleTap
			//,pinchstart: this.onImagePinchStart
			//,pinch: this.onImagePinch
			//,pinchend: this.onImagePinchEnd
		});


		// load image
		if(this.url) {
			this.setSrc(this.url);	
		}
	},
 

    onLoad: function() {
    	
		this.viewportWidth = this.viewportWidth || this.getWidth() || this.ownerCt.body.getWidth();
		this.viewportHeight = this.viewportHeight || this.getHeight() || this.ownerCt.body.getHeight();
			
		// grab image size
		this.imgWidth = this.imgEl.dom.width
		this.imgHeight = this.imgEl.dom.height;
				
		// calculate and apply initial scale to fit image to screen
		if(this.imgWidth > this.viewportWidth || this.imgHeight > this.viewportHeight)
			this.scale = this.baseScale = Math.min(this.viewportWidth/this.imgWidth, this.viewportHeight/this.imgHeight);
		else
			this.scale = this.baseScale = 1;
		
		// set initial translation to center
		this.translateX = this.translateBaseX = (this.viewportWidth - this.baseScale * this.imgWidth) / 2;
		this.translateY = this.translateBaseY = (this.viewportHeight - this.baseScale * this.imgHeight) / 2;
		
		// show image and remove mask
		this.imgEl.setStyle({ visibility: 'visible' });

		var baseWidth = Math.min(this.viewportWidth, 480);

		this.scale = baseWidth / this.imgWidth;			  					
		
		var boundWidth = this.imgWidth * this.scale;
		var boundHeight = this.imgHeight * this.scale;
		
		this.setHeight(boundHeight);
		
		this.imgEl.setStyle({
			width: boundWidth + 'px'
			,height: boundHeight + 'px'
		});

        this.fireEvent('load', this);
    },
 
    setSrc: function(url) {
    	if(this.imgEl)
			this.imgEl.dom.src = url;
		else
			this.url = url;
			
	},
    
    onStateChange : function(request) {
        if (request && request.xhr && request.xhr.readyState == 4) {
            this.clearTimeout(request);
            this.onComplete(request);
            this.cleanup(request);
        }
    }
});

Dispatching an event on image click in Sencha Touch

	var panel223 = new Ext.Panel({		
		bodyStyle: 'background-image:url(img/mobile_bg.png); background-repeat:repeat',
		scroll: false,
		html : 
			'<table class="duty_view" style="width:100%;padding-top: 9px;">' +
			'<tr><td align="center" style="padding-top: 9px;" colspan="2"><img src="'+common_url+'img/logo.png" width="100%"/></td></tr>' +
			'<tr><td class="txt2" align="center">' +
			'<a style="width:150px" class="large button blue" id="btnApt">APT</a></td><td class="txt2" align="center">'+
			'<a style="width:150px" class="large button blue" id="btnBuilding">Building</a></td></tr>' +			
			'</table>',
			listeners: {
				render: function(c, records){
					c.getEl().on('click', function(event, el){
						alert(el.id);
					}, c, {stopEvent: true});
	 			}
			}
	});