jQuery 1.6이전에는 attr() 함수를 이용하여 모든 태그의 속성을 제어가 가능했지만
1.6부터는 prop()라는 함수가 추가되어 attr() 함수의 역할을 나누어 주게 되었습니다.
일반적인 태그속성의 값을 변경하고자 할때는 attr()함수를 사용하고
태그속성에 따라서 기능이 제어되는 속성에 대해서는 prop()함수를 사용합니다.
간단하게 alert창을 띄워서 각태그 값을 비교해보도록 하겠습니다.
우선 BODY 태그내에 다음 코드를 추가해봅니다.
<input type="checkbox" checked="checked" id="check_box" class="check_class" />
attr/prop 함수를 이용하여 각 속성들의 결과값을 가져와 보겠습니다.
$(function(){ //checkbox의 아이디속성값 var prop_id = $(":checkbox").prop("id"); //checkbox의 클래스속성값 var prop_class = $(":checkbox").prop("class"); //checkbox 체크유무(true/false) var prop_checked = $(":checkbox").prop("checked"); //checkbox의 아이디속성값 var attr_id = $(":checkbox").attr("id"); //checkbox의 클래스속성값 var attr_class = $(":checkbox").attr("class"); //checkbox의 체크 속성값(checked/undefined) var attr_checked = $(":checkbox").attr("checked"); alert("id값 prop : " + prop_id + " , attr : " + attr_id); alert("class값 prop : " + prop_class + " , attr : " + attr_class); alert("checked값 prop : " + prop_checked + " , attr : " + attr_checked); });
실행해보도록 하겠습니다.
"checked" 속성을 제외한 나머지는 prop() / attr() 함수결과가 동일하게 나왓습니다.
"checked" 속성은 기능관련 속성이라 prop 함수에서는 true/false로 출력을 시켜줍니다.
이번에는 text 태그를 한번 비교해보도록 하겠습니다.
<input type="text" id="text_field" class="text_class" readonly="readonly" disabled="disabled" />
스크립트를 작성해보도록 합니다.
$(function(){ var prop_id = $(":text").prop("id"); var prop_class = $(":text").prop("class"); var prop_readonly = $(":text").prop("readonly"); var prop_disabled = $(":text").prop("disabled"); var attr_id = $(":text").attr("id"); var attr_class = $(":text").attr("class"); var attr_readonly = $(":text").attr("readonly"); var attr_disabled = $(":text").attr("disabled"); alert("id값 prop : " + prop_id + " , attr : " + attr_id); alert("class값 prop : " + prop_class + " , attr : " + attr_class); alert("readonly값 prop : " + prop_readonly + " , attr : " + attr_readonly); alert("disabled값 prop : " + prop_disabled + " , attr : " + attr_disabled); })
작성이 되었다면 실행을 해보도록 합니다.
위처럼 속성 값을 가져올경우에는
$("").attr("속성명") / $("").prop("속성명")
처럼 주면 됩니다.
이번에는 속성값을 변경 해주는 것을 알아보도록 하겠습니다.
속성값 변경은
$("").attr("속성명","적용하고자하는값") / $("").prop("속성명","적용하고자하는값")
처럼 입력값 하나를 추가해주시면 되겠습니다.
기능에 대한 속성에 대한 값은 prop 함수를 이용하여 true/false 로 적용해주시면 되겠고
일반 속성에 대한 값은 attr함수를 이용하여 값을 적용해주시면 되겠습니다.
체크박스의 checked 속성을 변경해보도록 하겠습니다.
body태그에 다음 코드를 작성해봅니다.
<input type="checkbox" />
실행을 시켜보면 그냥 체크안된 체크박스하나만 덩그러니 나타날겁니다.
그럼 prop() 함수를 적용하여 체크되게 코드를 작성해보도록 하겠습니다.
$(function(){ $(":checkbox").prop("checked",true); })
체크박스가 체크가 되어 화면에 출력된 것을 확인 할 수 있습니다.
attr함수를 이용하여 class속성을 추가해보도록 하겠습니다.
class를 추가/삭제 하는 함수가 별도로 존재하지만 이 함수는 이후에 설명하도록 하겠습니다.
style태그에 클래스를 작성해주도록 합니다.
.large_checkbox { width: 100px; height: 100px; }
다음처럼 스크립트 호출을 해보도록 합니다.
$(function(){ $(":checkbox").attr("class","large_checkbox"); })
결과를 한번 보도록 해보겠습니다.
위처럼 체크박스의 가로세로 사이즈 변경하는 클래스가 정상적으로 적용되어
체크박스 사이크가 커진것을 확인 할 수 있었습니다.
prop 속성만을 사용할수도 있겠지만 각 속성에 따라 지원유무에 대한 차이가 있을수 있으므로
prop가 안되면 attr로 적용해보시면 되실거 같습니다 ^^;;
by 개발로짜
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
---|---|
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |
jQuery 2강 - jQuery 자주 사용되는 id,class,태그별 셀렉터 맛보기 (0) | 2014.11.11 |
jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기 (0) | 2014.10.08 |
이번장은 간단하게 ExtJS에서 제공하는 Ajax에 대하여 포스팅 해보도록 하겠습니다.
jQuery의 ajax를 접근해보셨던 분들이시면 쉽게 이해하실 수 있습니다.
간단한 예를 들어서 설명을 진행하겠습니다.
우선 ExtJS의 스크립트 태그는 다음과 같습니다.
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title : 'AJAX 비동기 예제', renderTo : Ext.getBody(), items : [{ xtype : 'textfield', fieldLabel : '아이디', id : 'user_id' },{ xtype : 'textfield', fieldLabel : '제목', id : 'title' }], fbar : [{ xtype : 'button', text : '전송', handler : function(btn){ var user_id = Ext.getCmp("user_id").getValue(); var title = Ext.getCmp("title").getValue(); Ext.Ajax.request({ url : '/submit.jsp', method : 'POST', params : { user_id : user_id, title : title }, success : function(response) { var result = Ext.JSON.decode(response.responseText); Ext.MessageBox.show({ title : '응답결과', msg : '아이디:'+result.id+',제목:'+result.title, buttons : Ext.MessageBox.YES, icon : Ext.MessageBox.INFO }) }, failure : function(){ alert("에러발생"); } }); } }] }) });
위에서 기본패널에 텍스트 컴포넌트 2개와 하단툴바에 버튼 생성을 하였습니다.
버튼 클릭이벤트 발생 시점에 'Ext.Ajax.request' 를 이용하여 비동기 통신을 호출하게 됩니다.
'Ext.Ajax.request' 의 각 속성에 대한 설명은 다음과 같습니다.
url : 비동기 호출을 할 URL주소값입니다.
method : form태그의 method와 동일한 개념의 호출방식을 작성해주면 됩니다.
params : 비동기 호출 페이지에 넘겨줄 parameter 데이터 값입니다.
success : 성공
failure : 실패
속성을 보면 jQuery에서 지원하는 $.ajax 와 거의 동일한 구조입니다.
비동기 호출페이지인 submit.jsp 파일을 생성하여
다음처럼 JSON RESPONSE 하는 코드를 작성해보도록 하겠습니다.
JSON 파싱을위한 라이브러리는
기존과 동일한 json-simple 라이브러리를 이용하겠습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
String user_id = request.getParameter("user_id"); String title = request.getParameter("title"); JSONObject jsonObj = new JSONObject(); jsonObj.put("id", user_id); jsonObj.put("title", title); PrintWriter pw = response.getWriter(); pw.print(jsonObj); pw.flush(); pw.close();
위코드에서 알아보고자 한 부분은 사용자 페이지에서 전달받은 user_id와 title에 대한 값을 확인해보고
request받은 값들을 다시그대로 json 파싱하여 클라이언트 페이지로 response 해주는 샘플코드입니다.
실행결과를 한번 확인해보도록 하겠습니다.
정상적으로 Ajax 통신이 이루어진것을 확인하였습니다.
by 개발로짜
ExtJS 강좌 - ExtJS5의 polar 타입 차트그래프 간단하게 알아보기 (0) | 2014.11.18 |
---|---|
ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기 (0) | 2014.11.18 |
ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기 (3) | 2014.11.12 |
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12) | 2014.11.08 |
ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기 (0) | 2014.11.08 |
이번 포스팅은 ExtJS에서 제공하는 데이터뷰(DATAVIEW)를 이용하여
기본적인 리스트 출력을 해보도록 하겠습니다.
dataview 는 사용자가 정의한 템플릿 레이아웃을 출력하고
그 출력된 데이터를 사용할때 유용한 컴포넌트입니다.
제일먼저 목록출력시 필요한 스타일을 간단하게 꾸며보도록 하겠습니다.
.default { padding: 0 3px 0 3px; } .item { border-width: 1px; border-style: solid; background-color: blue; color: white; } .over { border-width: 2px; border-style: dotted; background-color: red; color: white; } a.default_a{ color: white; }
위처럼 스타일을 정의하셨다면
dataview 컴포넌트 출력을 위하여 ExtJS 코드를 작성해보도록 하겠습니다.
Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ renderTo : Ext.getBody(), title : 'DATAVIEW 샘플코드', items:[ { //Ext.view.View xtype : 'dataview', tpl: new Ext.XTemplate( '<tpl for=".">', '<div class="item">', '<a href="{url}" target="_blank" class="default_a">{title}</a>', '</div>', '</tpl>'), //기본 클래스 적용 cls: 'default', //목록 아이템 itemSelector: '.item', overItemCls: 'over', trackOver : true, store : Ext.create('Ext.data.Store',{ fields : ['title','url'], data: [ {title:'네이버',url : 'http://www.naver.com'}, {title:'티스토리',url : 'http://www.tistory.com'}, {title:'다음', url : 'http://www.daum.net'}, {title:'구글', url : 'http://www.google.com'} ], proxy: { type: 'memory' } }) } ] }); })
코드설명 전에 실행먼저 해보도록 하겠습니다 ^^
실행결과는 위와 같습니다.
"직접 레이아웃 스타일 잡고 HTML태그 이용해서 사용해도 되는거 아닌가요?"
라고 의문을 가지시는 분들이 계실텐데요
일반적인 html을 사용하셔도 무관하나 이벤트 및 메소드 등 지원되는 기능들이 많으니
DATAVIEW를 사용하지 않을 이유는 없는거 같습니다.
위 코드에 대해서 필요부분에 대해서 하나씩 설명해보겠습니다.
PANEL 컴포넌트 내부에 xtype이 dataview인 컴포넌트로 목록을 출력 해보았는대요
dataview를 사용하실때는 패키지 개념의 필수로 작성해주어야 하는 속성이 있습니다.
바로 store, tpl, itemSelector 이 3가지는 필수로 선언이 되어야 합니다.
tpl 속성은 "Ext.XTemplate" 클래스를 이용하여 템플릿을 만들어 주기 위해 필요한 속성입니다.
※ 속성에 정의된 코드를 보시면 JSP에서 JSTL을 사용해보셨던 분이시라면 익숙한 구조일거라 생각됩니다.
바로 C태그의 <c:forEach></c:forEach> 태그와 비슷한 개념입니다.
for문에 "."은 root 데이터를 의미하는것이라 대부분 "." 을 사용하면 되는부분이여서 크게신경안쓰셔도 되며
내부 적으로 보시면 {url},{title} 처럼 마치 JSP의 EL 태그와 유사한 치환자를 보실 수 있습니다.
Ext.data.Store 공간내에 담겨있는 데이터를 출력시켜주기위해 데이터스토어의 fields 내에 정의된 값들와 매칭 시켜주면 되겠습니다.
※ JSTL과 같이 IF태그 AND/OR 등도 사용이 가능합니다. 하지만 이번 포스팅에서는 다루지 않도록 하겠습니다.
그리고 필수요소 마지막인 itemSelector라는 속성이 있는데
이 속성은 이벤트나 메서드와 같은 dataview에서 지원해주는 기능들을
적용해주기 위한 셀렉터를 의미하는 겁니다.
그외에 cls는 전체 목록에 default로 적용시킬 클래스명을 명시해주면 되겠으며,
마지막으로 overItemCls속성의 경우는
dataview 아이템에 mouseover 되었을 경우의 적용시키고자 하는 클래스명을
작성주시면 되겠습니다.
overItemCls 속성 적용시 trackOver값을 true로 주면 어떤 역할을 하는거 같은대
확실히 어떤 역할을 하는지는 정확히 모르겠네요;;
저는 단순하게 a 태그에 링크를 걸어서 새창띄워주는 기능을 하였으나
리스너의 아이템클릭등과 같은 이벤트를 이용하여 사용하시면 되겠습니다.
by 개발로짜
ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기 (0) | 2014.11.18 |
---|---|
ExtJS 강좌 - Ajax 비동기 통신에 대하여 알아보자 (0) | 2014.11.13 |
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12) | 2014.11.08 |
ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기 (0) | 2014.11.08 |
ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0) | 2014.11.07 |