Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF

Size: px

Start display at page:

Download "Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF"

미자 공
6 years ago
Views:

1 CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM

2 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed', 'arguments' ); var myobject = { propertyname: 'String value', otherpropertyname: ;. myobject (1 ).

3 23. (property),.. firstword, thirdworld.,.. var test = new TestFunction({ firstword: 'three', secondword: 'fixed', thirdword: 'arguments'... var test = new TestFunction({ secondword: 'three' var test = new TestFunction({ secondword: 'three', fourthword: 'wow'. ({ ). 0. /, (:).. (,)..,,,. { name0: true,

4 24 CHAPTER 2 name1: { name2: value 2 ([ ]), (,).. { name: [ 'one', true, 3].,. CSS, JSON,.. Ext JS...,. { title: 'xtrusia', msg: '?', button: { yes: true, no: true, cancel: true, icon: 'xtrusia-icon', fn: function(btn){ Ext.Msg.alert(' ', btn);

5 25 Ext JS (widget).1,.,,,,. (component).,., onready.,.,.. Ext.onReady(function() { Ext.Msg.show({ title: 'xtrusia' msg: '?', button: { yes: true, no: true, cancel: true, onready....

6 26 CHAPTER 2, Ext JS.. X Esc. Ext JS. Ext.onReady:, (DOM ). Ext.Msg.show:. Ext.Msg (singleton),.. show prompt, alert wait... Ext.onReady(function() { Ext.Msg.show({ title: 'xtrusia' msg: '?', button: {

7 27 yes: true, no: true, cancel: true Ext.onReady.. var stapler = function() { Ext.Msg.show({ title: 'xtrusia', msg: '?', buttons: { yes: true, no: true, cancel: true Ext.onReady(stapler);.. buttons {yes: 'Maybe' Ext.Msg.YESNO.

8 28 CHAPTER 2, icon fn. fn., CSS...xtrusia-icon { background: url(images/xtrusia-head-icon.png) no-repeat;. icon CSS xtrusia-icon..,... Ext.Msg.show{ title: 'xtrusia', msg: '?', button: { yes: true, no: true, cancel: true, icon: 'xtrusia-icon', fn: function(btn) { Ext.Msg.alert('.', btn);

9 29 fn ( ). btn Yes.. Ext JS.. fn,. switch. fn: function(btn) { switch(btn){ case 'yes': Ext.Msg.prompt('xtrusia', '?'); break; case 'no': Ext.Msg.alert('xtrusia', '!'); break; case 'cancel': Ext.Msg.wait('...', ' '); break;

10 30 CHAPTER 2,.. (prompt)... (alert).. ( X Esc ) (progress bar).

11 31 Ext JS,... switch.. the office. DIV,. DIV Swingline. case 'yes': Ext.Msg.prompt('xtrusia', '?', function(btn, txt) { if (txt.tolowercase() == 'the office') { Ext.get('my_id').dom.innerHTML = 'Dull work'; else{ Ext.get('my_id').dom.innerHTML = txt;

$32 CHAPTER 2 Ext.DomHelper.applyStyles('my_id', { background: 'transparent url(image/stapler.png) 50% 50% no-repeat' break; the office,. (no).. case 'no': Ext.Msg.alert('xtrusia', '!$

12 32 CHAPTER 2 Ext.DomHelper.applyStyles('my_id', { background: 'transparent url(image/stapler.png) 50% 50% no-repeat' break; the office,. (no).. case 'no': Ext.Msg.alert('xtrusia', '!', function() { Ext.DomHelper.applyStyles('my_id', { 'background': 'transparent url(imges/fire.png) 0 100% repeat-x' Ext.DomHelper.applyStyles(Ext.getBody(), { 'background-color': '#FF0000' Ext.getBody().highlight('FFCC00', { endcolor: 'FF0000', duration: 6 break;

13 33 Ext JS DOM. Ext get. var mydiv = Ext.get('my_id'); my_id (ID) DOM Ext.Element (element)., body getbody.. my_id id. <div id='my_id' style='width:200px; height:200px;'>test</div> body body, my_id div. Ext.get('my_id').highlight('FF0000', { endcolor:'0000ff', duration: 3

14 34 CHAPTER 2. body 200. DOM ID. my_id ID. ID. ID Ext JS.., HTML Ext JS (scaffolding)., Ext.get. (tasks) flyweight.. flyweight. Ext.fly('my_id').highlight('FF0000', { endcolor: '0000FF', duration: 3.. flywieght. flyweight. flyweight.

15 35 var my_id = Ext.fly('my_id'); Ext.fly('another_id'); my_id.highlight('ff0000', {endcolor:'0000ff', duration: 3 flyweight. my_id another_id., Ext JS HTML. Ext Panel contentel. HTML contentel. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <style type="text/css">.my-panel-class { font-family: tahoma, sans-serif; </style> <script src="lib/extjs/adapter/ext/ext-base.js"></script> <script src="lib/extjs/ext-all-debug.js"></script> <script src="lib/extjs/locale/ext-lang-ko.js"></script> <script type="text/javascript"> Ext.onReady(function() { new Ext.Panel({ renderto: Ext.getBody(), title: ' ', height: 400, width: 600, cls: 'my-panel-class', contentel: 'main-content' </script>

16 36 CHAPTER 2 </head> <body> <div id="main-content"> <h1>.<h1> " ". </div> </body> </html> HTML Ext.BoxComponent. BoxComponent Ext HTML DIV., HTML.. BoxComponent (Panel). <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <style type="text/css">.my-panel-class { font-family: tahoma, sans-serif; </style> <script src="lib/extjs/adapter/ext/ext-base.js"></script> <script src="lib/extjs/ext-all-debug.js"></script> <script src="lib/extjs/locale/ext-lang-ko.js"></script> <script type="text/javascript"> Ext.onReady(function(){ new Ext.Panel({ renderto: Ext.getBody(), title: ' ', height: 400, width: 600, cls: 'my-panel-class', layout: 'fit', items: new Ext.BoxComponent({ el: 'main-content' ) </script>

17 37 </head> <body> <div id="main-content"> <h1>.</h1> " ". </div> </body> </html>.,..,., Ext JS... (form).

3장

C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX