CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM
22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed', 'arguments' );...... var myobject = { propertyname: 'String value', otherpropertyname: 3.14159 ;. myobject (1 ).
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,
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);
25 Ext JS (widget).1,.,,,,. (component).,., onready.,.,.. Ext.onReady(function() { Ext.Msg.show({ title: 'xtrusia' msg: '?', button: { yes: true, no: true, cancel: true, onready....
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: {
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.
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);
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;
30 CHAPTER 2,.. (prompt)... (alert).. ( X Esc ) (progress bar).
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', '!', 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;
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
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.
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>
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>
37 </head> <body> <div id="main-content"> <h1>.</h1> " ". </div> </body> </html>.,..,., Ext JS... (form).