센차 터치 2.0 , sencha touch 2.0.1.1 senchaexamples.com의 Ext.Button.iconAlign
이 번 시간은 버튼에서 사용 되는 아이콘의 위치를 배치 하는 방법을 알아 볼 것이다.
사용 방법은 간단하며 다음과 같다.
iconAlign : 'left', -> 아이콘 위치 왼쪽
iconAlign : 'right', -> 아이콘 위치 오른쪽
iconAlign : 'top', -> 아이콘 위치 위쪽
iconAlign : 'bottom', -> 아이콘 위치 아래쪽
실제 실습 실행 화면이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link href="../../frameworks/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<title>Setting the icon alignment on an Ext.Button component using Sencha Touch 2</title>
</head>
<body>
<script src="../../frameworks/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
/*
sencha touch 2.0.1.1-commercial
*/
Ext.application({
launch: function () {
Ext.create('Ext.Panel', {
fullscreen : true,
styleHtmlContent : true,
defaults : {
margin: 5
},
layout: {
type : 'vbox',
align : 'center'
},
items: [
{
xtype : 'button',
text : '<code>iconAlign: left</code>',
iconAlign : 'left',
iconCls : 'arrow_left',
iconMask : true
},{
xtype : 'button',
text : '<code>iconAlign: right</code>',
iconAlign : 'right',
iconCls : 'arrow_right',
iconMask : true
},{
xtype : 'button',
text : '<code>iconAlign: top</code>',
iconAlign : 'top',
iconCls : 'arrow_up',
iconMask : true
},{
xtype : 'button',
text : '<code>iconAlign: bottom</code>',
iconAlign : 'bottom',
iconCls : 'arrow_down',
iconMask : true
}
]
});
}
});
</script>
</body>
</html>
원본 출처 : http://senchaexamples.com/
