이 자료실은 공식 자료실에 포함될 예정이며 신규 등록되지 않습니다.
자료를 올려주셨던 분들은 공식 자료실에 다시 올려주시면 매우 감사하겠습니다.
![[레벨:6]](http://www.xpressengine.com/modules/point/icons/default/6.gif "포인트:4295point (90%), 레벨:6/30"){kind=icon}
Diver| 라이센스 : | GPL2 |
|---|---|
| 기타 라이센스 : | |
| 적용 버전 : | 정식버전(1.0이후) |
| 프로젝트 URL : |
Ext JS popup 팝업창 입니다.
Ext JS JavaScript Framework(http://www.extjs.com) 를 사용했습니다. 기본 팝업소스는 팔공산님의 소스를 활용 했고요.;
창크기는 수정은 /Ext_JS_popup/skins/popup/js/hello.js 입니다.
.
.
width:450, /* 창 가로폭 사이즈 */
height:390, /* 창 세로폭 사이즈 */
x: 40, /* 창 x 위치 해상도마다 위치가 틀려 집니다.*/
y: 60, /* 창 y 위치 */
.
.
코드생성은 예제는 다음과 같습니다.
<img class="zbxe_widget_output" widget="Ext_JS_popup" skin="popup" colorset="popup" title="물놀이 안전사고 주의보" order_target="list_order" order_type="desc" mid_list="popup" />
지원되는 브라우저는 아래와 같습니다.
- Internet Explorer 6+
- FireFox 1.5+ (PC, Mac)
- Safari 3+
- Opera 9+ (PC, Mac)
적용된 화면
적용된 사이트 rescue.go.kr (2009.8.15까지 게시)
저작권은 http://www.extjs.com/products/license.php 참고하시기 바랍니다.
![[레벨:5]](http://www.xpressengine.com/modules/point/icons/default/5.gif "포인트:2340point (9%), 레벨:5/30"){kind=icon}
종스![[레벨:3]](http://www.xpressengine.com/modules/point/icons/default/3.gif "포인트:895point (13%), 레벨:3/30"){kind=icon}
Lemonsea![[레벨:2]](http://www.xpressengine.com/modules/point/icons/default/2.gif "포인트:575point (47%), 레벨:2/30"){kind=icon}
kangta
![[레벨:7]](http://www.xpressengine.com/modules/point/icons/default/7.gif "포인트:5095point (50%), 레벨:7/30"){kind=icon}
bncPlan며칠전 올리셨다가 지우셨길래...계속 눈빠지게 기다렸습니다...^^
고맙습니다. 잘 사용하겠습니다.
근데...위에 분 말씀처럼
위치조절이나 기간설정등을 할 수는 없는지요?
XE1.2.4 / IE7 / OS 2003 64Bit 인데 한글이 박스로 깨져 나오고 페이지에서 다른위젯이 모두 사라지고 팝업위젯이 상단에 반쯤 걸처서 나옵니다.
![[레벨:1]](http://www.xpressengine.com/modules/point/icons/default/1.gif "포인트:150point (22%), 레벨:1/30"){kind=icon}
근스
Ext_JS_popup.class를 Editplus 같은 프로그램으로 열어서
정렬순서에서 asc를 desc로 바꾸면 기본 값이 desc로 설정되어서 나중에 입력된 글부터 출력되는거 같습니다.
또한 info.xml 에서 order_type를 설정해주는 것이 없는거 같던데.. 이부분을 추가해서 asc나 desc 선택할 수 있는 부분을 만들게 되면 선택한대로 팝업 창이 뜨는거 같습니다.
![[레벨:4]](http://www.xpressengine.com/modules/point/icons/default/4.gif "포인트:1920point (59%), 레벨:4/30"){kind=icon}
하이우리코드를 제일 layout.html제일 위와 제일아래에 두어봤습니다. 위치와 상관없이 폰트나 무엇인가가 충돌이 있어 보입니다.
아주크지는 않지만, 조금씩 좌측으로 밀립니다. 보여드리는 위젯은 기본위젯의 최근문서 입니다.. 기호 목록이 사라졌네요..
FireFox 에서는 완벅하게 작동하지만 엑스프로러에선 문제가 발생합니다. popup을 drag and drop하려고 하니 팝업이 온통 반투명한 푸른 색으로 변하네요. 다른분은 어떤가요.
스크린켑처해서 첨부했습니다.
문제는 이 위젯을 어디에 두느냐에 따라 XE의 css와 충돌이 일어나네요.
팝업이 뜬 상태에서는 페이지 기능을 이용하여 작성된 페이지의 <h1/2/3/4> 시리즈라든지 <ul> 류 등의 폼맷이 없어져 버립니다.
이것은 ext-all.css 의 설정과 충돌이 일어나서 그런 것 같더군요.
그래서 이부분은 편집해서 해당 태그들을 코멘트 처리하니까 되기는 한데, 에구, 이러니까 팝업창의 탭제목의 위치가 오른쪽으로 이동해 버렸네요. 이러한 작업을 하지 않고도 볼 수 있도록 하려면 어떻게 해야 하나요.
전체레이아웃의 어디에 본 위젯코드를 두는냐에 따라 팝업창의 이동 범위가 정해지더군요. 그래서 브라우져 전체영역으로 이동범위를 확대하려니 아래의 그림과 같은 위치에 두니까 해결되었는데, 위에서 언급한 문제가 발생하는군요. 해결방법이 있는지요.
※증상 팝업
1. 창이 다른 위젯에게 가려집니다.
2. 팝업창 위치를 0으로 해도 더이상 위로 안올라갑니다.
해결책이 있을까요?
이팝업형식이 절대위치가 아니거나 팝업보다 위레이어중에 설정을 방해하는 요소가 있나봐요;ㅎㅎ;
0으로 안되시면 -1 이나 -10 원하는 높이로;;ㅎㄷ;
![[레벨:0]](http://www.xpressengine.com/modules/point/icons/default/0.gif "포인트:85point (94%), 레벨:0/30"){kind=icon}
CASO팝업 깔끔하고 아주 좋네요. 감사히 사용하겠습니다.^^ 그리고 아래 참고로 가운데 정렬 홈페이지의 경우
해상도에 관계없이 홈페이지 크기 비례하여 좌표설정 하시려면
<div id="popup" style="Z-INDEX:150;LEFT:expression(((document.body.clientWidth-980)+Math.abs(document.body.clientWidth-980))/4+0); TOP:0px; POSITION:absolute;">
<img class="zbxe_widget_output" widget="Ext_JS_popup" skin="popup" colorset="popup" title="팝업내용" order_target="list_order" mid_list="popup" />
</div>
위와 같이 DIV 안에 감싸서 넣어주고 hello.js파일로 좌표를 넣어주면 되네요. layout.html 맨 밑에다 넣어야 적용이 되요.
근데 레이아웃에 넣으니까 메인에만 팝업이 나오는게 아니라 모든 페이지에 팝업이 나오니 문제네요.
메인페이지용 레이아웃을 따로 만들어서 해야될꺼같네요.
그리고 플래시가 있으면 그 아래로 팝업이 묻혀버릴 수 있으니 플래시 embed 태그 안에 wmode="transparent"를 넣어주시면 되요
Ext JS popup 팝업창 화면 중간에 띄우기
팝업창을 화면 중간에 띄우려고 구글에서 삽질 하다 보니 알게 되었네요. 필요하신 분은^^
이 팝업창을 화면 중간에 띄우려면
1. hello.js를 열어
width:560,
height:770,
x: 250,
y: 30,
이 부분에서 X좌표를 없앱니다.
width:560,
height:770,
y: 30,
이렇게.
2. 관리자 모드를 열어 팝업을 띄우려는 레이아웃의 '레이아웃 편집'을 열어 'Ext JS 팝업창' 코드를 생성합니다. 그런 다음 '레이아웃 편집' 가장 상단에 아래와 같이 편집해 줍니다.
<div align="center"><a href="./javascript:openPopup();"></a>
생성한 코드를 적어 놓는 곳
</div>
끝났습니다.
![[레벨:9]](http://www.xpressengine.com/modules/point/icons/default/9.gif "포인트:8140point (49%), 레벨:9/30"){kind=icon}
팔공산Diver님의 팝업창 정말 마음에 듭니다. 추천 꾹
위의 위젯소스에서 창의 크기와 위치를 위젯설정에서 관리하게끔 할려고 해보니 약간의 문제가 생깁니다.
이 스크립트를 보시는 고수님들의 답변을 기다립니다.
js파일안에 있는 자바스크립트를 list.html파일안에 넣어서
<script type='text/javascript'>내용 </script>
이런식으로 나타낼려고 하니 자바스크립트 에러가 뜨면서 위젯생성이 되지를 않습니다.
아래는 소스들입니다.
js파일내용
Ext.onReady(function(){
var button = Ext.get('show-btn');
// create the window on the first click and reuse on subsequent clicks
var win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:450,
height:210, // 1칸에 120+
x: 40,
y: 60,
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),
buttons: [{
text:' 오늘 하루 열지 않음',
handler: function(){
set_testCookie();
win.hide();
}
},
{
text: '닫기',
handler: function(){
win.hide();
}
}]
});
win.show();
});
수정한 list.html파일
<script type='text/javascript'>
Ext.onReady(function(){
var button = Ext.get('show-btn');
var win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:450,
height:210,
x: 40,
y: 60,
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),
buttons: [{
text:' 오늘 하루 열지 않음',
handler: function(){
set_testCookie();
win.hide();
}
},
{
text: '닫기',
handler: function(){
win.hide();
}
}]
});
win.show();
});
</script>
위와 같이 js파일안의 스크립트를 html안에 삽입하면 에러가 나옵니다.
이렇게 하는 이유는
width:450,
height:210,
x: 40,
y: 60,
이 부분의 숫자를 위젯설정에서 변경할려고 합니다.
<script type="text/javascript"> 이걸
<script language="javascript"> 이렇게 바꿔주세요~
이렇게 깔끔하고 완벽한 위젯에 댓글이 없나 했는데... 헉~ 조회수1 ^^;
어쩌다 제가 첫번째로 읽게 되었네요~ ㅎㅎ 파폭, 익스7 완벽합니다~ 비쥬얼효과도 죽이구요~