728x90
- 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});
}
}
});728x90
jstl-1.2.jar