ExtJs xtype List.

xtype            Class

-------------    ------------------

box              Ext.BoxComponent

button           Ext.Button

buttongroup      Ext.ButtonGroup

colorpalette     Ext.ColorPalette

component        Ext.Component

container        Ext.Container

cycle            Ext.CycleButton

dataview         Ext.DataView

datepicker       Ext.DatePicker

editor           Ext.Editor

editorgrid       Ext.grid.EditorGridPanel

flash            Ext.FlashComponent

grid             Ext.grid.GridPanel

listview         Ext.ListView

panel            Ext.Panel

progress         Ext.ProgressBar

propertygrid     Ext.grid.PropertyGrid

slider           Ext.Slider

spacer           Ext.Spacer

splitbutton      Ext.SplitButton

tabpanel         Ext.TabPanel

treepanel        Ext.tree.TreePanel

viewport         Ext.ViewPort

window           Ext.Window



Toolbar components

---------------------------------------

paging           Ext.PagingToolbar

toolbar          Ext.Toolbar

tbbutton         Ext.Toolbar.Button        (deprecated; use button)

tbfill           Ext.Toolbar.Fill

tbitem           Ext.Toolbar.Item

tbseparator      Ext.Toolbar.Separator

tbspacer         Ext.Toolbar.Spacer

tbsplit          Ext.Toolbar.SplitButton   (deprecated; use splitbutton)

tbtext           Ext.Toolbar.TextItem



Menu components

---------------------------------------

menu             Ext.menu.Menu

colormenu        Ext.menu.ColorMenu

datemenu         Ext.menu.DateMenu

menubaseitem     Ext.menu.BaseItem

menucheckitem    Ext.menu.CheckItem

menuitem         Ext.menu.Item

menuseparator    Ext.menu.Separator

menutextitem     Ext.menu.TextItem



Form components

---------------------------------------

form             Ext.FormPanel

checkbox         Ext.form.Checkbox

checkboxgroup    Ext.form.CheckboxGroup

combo            Ext.form.ComboBox

datefield        Ext.form.DateField

displayfield     Ext.form.DisplayField

field            Ext.form.Field

fieldset         Ext.form.FieldSet

hidden           Ext.form.Hidden

htmleditor       Ext.form.HtmlEditor

label            Ext.form.Label

numberfield      Ext.form.NumberField

radio            Ext.form.Radio

radiogroup       Ext.form.RadioGroup

textarea         Ext.form.TextArea

textfield        Ext.form.TextField

timefield        Ext.form.TimeField

trigger          Ext.form.TriggerField



Chart components

---------------------------------------

chart            Ext.chart.Chart

barchart         Ext.chart.BarChart

cartesianchart   Ext.chart.CartesianChart

columnchart      Ext.chart.ColumnChart

linechart        Ext.chart.LineChart

piechart         Ext.chart.PieChart



Store xtypes

---------------------------------------

arraystore       Ext.data.ArrayStore

directstore      Ext.data.DirectStore

jsonstore        Ext.data.JsonStore

simplestore      Ext.data.SimpleStore      (deprecated; use arraystore)

store            Ext.data.Store

xmlstore         Ext.data.XmlStore

JQuery 와 다른 라이브러리 충돌시.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Using jQuery with Other Libraries

From jQuery JavaScript Library

Jump to: navigation, search

Contents 1 General 2 Overriding the $-function 3 Including jQuery before Other Libraries 4 Referencing Magic - Shortcuts for jQuery

[edit]

General

The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses "$" as a shortcut for "jQuery"

[edit]

Overriding the $-function

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.

Additionally, there's another option. If you want to make sure that jQuery won't conflict with another library - but you want the benefit of a short name, you could do something like this:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();
     
     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

You can define your own alternate names (e.g. jq, $J, awesomeQuery - anything you want).

Finally, if you don't want to define another alternative to the jQuery name (you really like to use $ and don't care about using another library's $ method), then there's still another solution for you. This is most frequently used in the case where you still want the benefits of really short jQuery code, but don't want to cause conflicts with other libraries.

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Put all your code in your document ready area
     jQuery(document).ready(function($){
       // Do jQuery stuff using $
       $("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

This is probably the ideal solution for most of your code, considering that there'll be less code that you'll have to change, in order to achieve complete compatibility.

Also see: Custom Alias

[edit]

Including jQuery before Other Libraries

If you include jQuery before other libraries, you may use "jQuery" when you do some work with jQuery, and the "$" is also the shortcut for the other library. There is no need for overriding the $-function by calling "jQuery.noConflict()".

 <html>
 <head>
   <script src="jquery.js"></script>
   <script src="prototype.js"></script>
   <script>
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

[edit]

Referencing Magic - Shortcuts for jQuery

If you don't like typing the full "jQuery" all the time, there are some alternative shortcuts:

• Reassign jQuery to another shortcut
  • var $j = jQuery;
  • (This might be the best approach if you wish to use different libraries)
• Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:
  • (function($) { /* some code that uses $ */ })(jQuery)
  • Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype's $, so you're making a choice to use only jQuery in that block.
• Use the argument to the DOM ready event:
  • jQuery(function($) { /* some code that uses $ */ });
  • Note: Again, inside that block you can't use Prototype methods

JQuery 사용팁 모음.

JQuery 를 사용하면서, 자주 쓰이고 제일 유용한것들(?) 정리..

아마 이정도면 JQuery 로 왠만한건 구현 가능할듯?



[code]

//초기 실행
$(document).ready(function() {
   init();
})


//onclick 설졍
$('id').click( function(){
    alert('click!!');
})


//onchange 설졍
$('id').change( function(){
    alert('click!!');
})


//CSS변경
$('id').css('style', 'attribute');


//첫번째 tr를 빼고 전부 삭제
$('someTableSelector tr:not(:first)').remove();


//select 세팅
$("id option[value=Apple]").attr("selected", "true");


//selected 값
$("id :selected").val()


//table 안에 tr추가
$('id').append( $('<tr></tr>').html('<td>JQuery</td>');


//swfobject 플러그인 사용.
    $('#flashcontent').flash(
        {
            swf: 'fla/cp.swf',
            width: 820,
            height: 250,
            flashvars:
            {
                name1: 'jQuery',
                name2: 'SWFObject',
                name3: 'Plugin'
            }
        }
    );


//

[/code]

Javascript Object Table

출처: http://www.jasko.co.kr/lesson/object_table.html#history%20array

Anchor | anchors array | Applet | applets array | Area | Array | Button | Checkbox | Date | document | FileUpload | Form | forms array | frames array | Hidden | History | history array | Image | images array | Layers | layers array | Link | links array | location | Math | MimeType | mimeTypes array | navigator | Number | Option | options array | Password | Plugin | plugins array | Radio | radio array | Reset | screen | Select | String | Submit | Text | Textarea | window
※ 녹색은 네츠케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다
객체(Object)	속성(Property)	메소드(Method)	이벤트핸들러(Event Handler)
Anchor	name text x y
anchors array	length
Applet		applet's methods
applets array	length
Area	hash host gostname href pathname port protocol search target		onClick onmouseOut onmouseOver
Array	length	concat join pop push reverse shift slice sort unshjft
Button	form name type value	blur click focus	onClick onmouseDown onmouseUp
Checkbox	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
Date		getDate getDay getFullYear getHours getMilliseconds getMinutes getMonth getSeconds getTime getTimezoneOffset getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMilliseconds getUTCMinutes getUTCMonth getUTCSeconds getYear parse setDate setFullYear setHours setMilliseconds setMinutes setMonth setSeconds setTime setUTCDate setUTCHours setUTCMilliseconds setUTCMinutes setUTCMonth setUTCSeconds setYear goGMTString toLocaleString toString toUTCString UTC valueOf
document	activeElement alinkColor all Anchor anchors Applet applets Area bgColor body charset children cookie defaultCharset domain embed embeds expando fgColor Form forms Image images lastModified Layer layers linkColor Link links location parentWindow plugins readyState referrer scripts selection styleSheets title URL vlinkColor	clear close createElement createStylesheet elementFromPoint getSelection open write writeIn
FileUpload	form name type value	blur focus select	onBlur onFocus onSelect
Form	action Button Checkbox elements encoding FileUpload Hidden length method name Password Radio Reset Select Submit target Text Textarea	reset submit	onReset onSubmit
forms array	length
frames array	length
Hidden	form name type value
History	current length next previous	back foward go
history array	length
Image	border complete height hspace lowsrc name src vspace width x y		onAbort onError onLoad
images array	length
Layers	above background below bgColor clip document hidden left name pageX pageY parentLayer siblingAbove siblingBelow src top visibility window x y zindex	load moveAbove moveBelow moveBy moveTo moveToAbsolute resizeBy resizeTo	onBlur onFocus onmouseOut onmouseOver onmouseUp
layers array	length
Link	hash host hostname href pathname port protocol search target text x y		onClick onmouseOut onmouseOver
links array	length
location	hash host hostname href pathname port protocol search	reload replace
Math	E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2	abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan
MimeType	description enabledPlugin suffixes type
mimeTypes array	length
navigator	appCodeName appMinorVersion appName appVersion browserLanguage cookieEnabled cpuClass languages mimeTypes platform plugins systemLanguage userAgent userLanguage userProfile	javaEnabled preference savePreferences taintEnabled
Number	MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY POSITIVE_INFINITY	toString valueOf
Option	defaultSelected index selected selectedIndex text value
options array	length
Password	defaultValue form name type value	blur focus select	onBlur onChange onFocus onKeydown onKeypress onKeyup onSelect
Plugin	description filename name	refresh
plugins array	length
Radio	checked defaultChecked form name type value	blur click focus	onClick onmouseDown onmouseUp
radio array	length
Reset	form name type value	blur click focus	onClick onmouseDown onmouseUp
screen	availHeight availLeft availTop availWidth BufferDepth colorDepth height pixelDepth updayeInterval width
Select	form length name options selectedIndex type	blur focus	onChange
String	length	anchor big blink bold charAt charCodeAt concat fixed fontcolor fontsize formCharCode indexOf italics lastIndexOf link match replace search slice small split strike sub substr substring sup toLowerCase toUpperCase
Submit	form name type value	blur click focus	onClick onMouseDown onMouseUp
Text	defaultValue form name type value	blur click focus select	onBlur onChange onFocus onKeydown onKeyup onSelect
Textarea	defaultValue form name type value	blur click focus select	onBlur onChange onFocus onKeydown onKeyup onSelect
window	clientInformation closed defaultStatus dialogArguments dialogHeight dialogLeft dialogLeft dialogTop dialogWidth document event frames history innerHeight innerWidth length location locationbar menubar name navigator offscreenBuffering opener outerHeight outerWidth pageXOffset pageYOffset parent personalbar screen screenX screenY scrollbars self status statusbar toolbar top	alert back blur close confirm find focus forward home moveBy moveTo navigate open print prompt resizeBy resizeTo scroll scrollBy scrollTo stop	onBlur onError onFocus onLoad onResize onUnload

JQuery 를 이용한 html와 script 와 분리

요새 prototype.js 를 이용해, javascript 를 깔끔하게, 효율적으로

만드는 방안으로 생각 하고 있는 도중, JQuery 를 알게 되었다.

그런데 이게, JQuery 예제를 이용하던 도중 이것을 이용하면,

디자이너가 HTML를 넘기면 id 및 name 를 세팅하여, 넘겨주면,

스크립트 작업 후 개발을 할때, 디자인이 수정되어도, 가공된 페이지에 변경 없이 작업을 할수 가 있다고 생각이

들었다. Greate!!

물론 prototype 를 이용해 할수도 있는데 흠.. JQuery 를 이용하면 좀더 효율 적으로 할 수 있다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>

<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript">

 $(document).ready(
  function (){
   $("#textcubeLink").click(
    function(){
     alert("empas image click");
    }
   ).css("cursor", "pointer");
   
   $("#blogLink").click(
    function(){
     location.href = "http://taesuz.net/tt/";
    }
   ).css("cursor", "pointer");
   
   

  }
 
 
 );

</script>

<style type="text/css">
    .links { cursor: pointer; }
 </style>

</head>

<body>

<a id="blogLink">taesuz.net 링크</a>
<br />
<br />
<img src="http://taesuz.net/tt/skin/ReinerSchwarzKoreanisch/images/textcube.jpg" id="textcubeLink" />

</body>
</html>

보시다 시피, 분리가 될수 있다. html 디자인은 그대로 있지만, 링크나, 스크립트 제어 부분이 완전히 분리되어있다.

좀더 공부 하면, 보다 깔금하게 효율적으로 분리가 되어 제어 가능하지 않을까?

이 얼마나 알흠다운가 ㅎㅎ

앞으로 효율적으로 활용해 봐야겠다.

팝업창에서 부모 창으로 포커스(Internet Explorer, FireFox)

A.jsp 페이지에서, C.jsp 를 팝업으로 띄워야 하는데,

문제는 팝업을 띄운후 부모창에 포커스를 줘야 한다..

근데 Internet Explorer 에서는 다음과 같이 해결 가능하다.

window.onload = function init(){
    var win = window.open("C.jsp", "c");

    self.focus();      

}

그러나 window.focus() 가 FireFox에서는 지원이 안된다..

구글링을 해봤지만 답 없음.. 그리하여.. 꽁수를 찾아 냈다.

window.blur() 옵션은 먹기에 window.blur()를 이용하였다.

우선 IE에서는 제대로 되는 위에 소스를 A에 박아주고,

B더미 페이지를 만들고, B에서 blur()를 쓴후 C로 이동하는 방법..

대략 3시간 헤맨듯.. ㅡㅡ;

저같은 상황에 도움이 되기를....

A.jsp


window.onload = function init(){
    var win = window.open("B.jsp", "b");

    self.focus();      

}

 

B.jsp

<body onLoad="self.blur(); location.href='C.jsp';">

 

팝업 같은 레이어 만들기. (투명 레이어 효과)

이번 프로젝트에 플래시를 쓰지않고 플래시와 같은 반투명 레이어를 만드는것이 이슈가 되서..

한번 만들어 봤다..

IE/FF 모두 동작한다..

흠... 간단한 예제는 그렇게 복잡하지 않지만..

게시판 정도 붙이려면.. 노가다가 필요하겠는걸.. ㅡㅡ;;

아래 소스를 Editplus 나 기타 HTML 에디터에 붙여 넣고, 실행하면 동작 한다.

네이버 버튼을 누르면 팝업이 뜨고 팝업의 닫기 버튼을 누르면, 없어진다.

원리는 filter 옵션을 주어 반투명하게 만들고, 팝업을 띄우던 링크를 삭제 하고 숨겨져있던 레이어를 띄운다.

소스를 보시면 쉽게 아실듯....

협찬 : (공식적이진 않음) 레이싱걸 구지성씨...

Source View...

<script type="text/javascript">
 
 window.onload = function(){
  document.getElementById("registPopup").style.display="none";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=100)";
  document.getElementById("bodyLayer").style.opacity = "1";
 }
 

 function showPopup(){
  document.getElementById("registPopup").style.top = 450;
  document.getElementById("registPopup").style.left = 300;
  document.getElementById("test_btn").removeAttribute("href");
  document.getElementById("test_btn").style.cursor = "Arrow";
  document.getElementById("registPopup").style.display = "block";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=10)";
  document.getElementById("bodyLayer").style.opacity = "0.1";

 
 }

 function closePopup(){
  document.getElementById("test_btn").setAttribute("href","javascript: showPopup();");
  document.getElementById("test_btn").style.cursor = "Pointer";
  document.getElementById("registPopup").style.display="none";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=100)";
  document.getElementById("bodyLayer").style.opacity = "1";
 }
</script>

  <div id="registPopup" style="position: relative;z-index:1;width:200;height:100; background-color: #F5F5F5;">
  <h3>투명위에 뜨는 팝업....</h3>
  <input type="button" onclick="closePopup();" value="닫기" />
 </div>

 <div id="bodyLayer" style="z-index:0;position:absolute;top:0;width:227;height:27" >
 <iframe name="imgFrame" id="imgFrame" src="http://blogfiles6.naver.net/data28/2008/2/1/181/%B1%B8%C1%F6%BC%BA102_ghkdwo412.jpg" width=600 height=900 scrolling=no frameborder=0></iframe>
 <br />
 <br /><a id="test_btn" href="javascript: showPopup();"><img src="http://sstatic.naver.com/search/images11/logo_naver.gif" border=0 /></a>
 </div>

JSEclipse로 자바스크립트 애플리케이션 작성하기 (한글)

JSEclipse...

adobe에서 배포하는 아주 훌륭한 JS편집기이다.

Eclipse에서 작업시에 편리하게 사용할수 있다.

설치 및 사용 설명은 IBM의 사이트 컬럼을 참조..

http://www.ibm.com/developerworks/kr/library/tutorial/os-eclipse-jseclipse/?S_TACT=105AGX55&S_CMP=EDU

self.close() 사용시 이 창을 닫으시겠습니까? 없얘기..

 

출처 : http://cafe.naver.com/some8848.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=4

self.close();

를 사용할시에 팝업이 뜨면서 예 아니오 버튼이 나오게 된다.

이것이 나오지 않고,

바로 닫게 하는 자바스크립트이다.


[code type=javascript] if (/MSIE/.test(navigator.userAgent)) {
  if(navigator.appVersion.indexOf("MSIE 7.0")>=0) {
   window.open('about:blank','_self').close();
  } else {
     window.opener = self;
     self.close();
  }                      
 }
[/code]

서로다른 도메인에서 Access 가능 스크립트

부모창,자식창에 각각 다음 소스를 삽입하세요..



[code type=javascript]<script language=javascript>

//주소는 본인의 사이트 주소 입력
document.domain="www.xxx.co.kr"

</script>
[/code]


document 오브젝브의 domain속성은 일종의 보안 목적으로 사용 됩니다.

구체적으로 말씀 드리자면.. 서로 다른 웹사이트의 페이지를 익스플로러 창 두개를

띄워서 각각 읽고 있다고 가정시에.. 두 페이지는 서로 어떠한 속성도 줄수도,읽을수도 없습니다.
예를 들자면, A사이트에서 팝업으로 B사이트의 페이지를 열었을때 B사이트의 페이지에서는

A사이트의 숨겨진 속성을 사용할수 없습니다.. 또, 이것이 정석이지요..각각의 보안효과를 위해서는..



그런데 이런 문제가 발생할수 있습니다.

www.yahoo.co.kr 과 search.yahoo.co.kr 은 같은 회사의 웹페이지 임에도 불구 하고,

위에서 말씀드린 이론대로라면, 서로 어떤 속성도 주고 받을수 없습니다. 로드된

웹서버 도메인이 다르기 때문이지요.. 그러나 이럴때 두 페이지에..



<script language=javascript>

document.domain="yahoo.co.kr"

</script>



을 삽입하게 되면, 서로 다른 웹서버에서 로드 되었다 해도,  두 페이지는 서로의

속성을 모두 사용할수 있습니다. 공통된 도메인을 명시 하였기 때문이죠..

이럴때, document.domain 메소드를 사용하는 것입니다.

출처 : Tong - 몹쓸강아지님의 JavaScript통

쿠키를 이용한 아이디 저장..

친구가 일하면서 나에게 숙제를 줘서.. 하다보니까 나중에 써먹을 일이 있을꺼 같아서..

대충 구현하고 포스팅~

------------------------------------------------------------------------------------------------
[code type=javascript]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>쿠키</title>
<script language="javascript">
 //document.onreadystatechange=function(){
 // if(document.readyState == "complete") chkCookie();
 //}
 function setCookie (name, value) {
  if (confirm('ID를 저장하시겠습니까?'))
  {
   if (document.loginFrm.isCheck.checked)
   {
    var expdate = new Date();
    expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 7);     var sTmpStr = name + "=" + escape (value) + "; expires=" + expdate;
    document.cookie = sTmpStr;
    //alert('쿠키값저장 = ' + sTmpStr);    }
  }
 }  function getCookie(Name) {
  var search = Name + "="
  if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
     end = document.cookie.length
    return unescape(document.cookie.substring(offset, end))
   }
  }
  return "";
 }
 function deleteCookie( cookieName ){
  document.cookie = cookieName+"=; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
  location.reload();
 }  function chkCookie(){   var isCookie = document.loginFrm;
  if (getCookie('uid') != "")
  {
   document.loginFrm.isCheck.checked = true;
   document.loginFrm.uid.value=getCookie('uid');
  }
  else
  {
   document.loginFrm.uid.value='';
   document.loginFrm.isCheck.checked = false;
  }
 }
</script>
</head>
<body onload="chkCookie();"> <form name="loginFrm" action="test1.html">
 <input type="text" name="uid">
 <input type="checkbox" onclick="javascript:setCookie('uid', document.loginFrm.uid.value);" name="isCheck"><br>
 <input type="submit" value="확인">
 <input type="button" value="삭제" onclick="javascript:deleteCookie('uid');">
</form>
</body>
</html> [/code]