Sencha EXTJS Panel Demo


<%@ page language="java" contentType="text/html; charset=UTF-8"
                                                                            pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                                                                  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
   
    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="ext-4.1/resources/css/clifton-blue.css" />
   
    <script type="text/javascript" src="/ext-4.1/ext-all.js"></script>
    <script type="text/javascript" src="/ext-4.1/locale/ext-lang-ko.js" charset="utf-8" />

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="/ext-4.1/shared/example.css" />
    <link rel="stylesheet" type="text/css" href="/css/project.css" />
    <script type="text/javascript" src="/Panel.js"></script>

</head>
<body>

</body>
</html>


Panel.js


Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
       
       
        var store = Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
            ]},
            proxy: {
                   type: 'memory',
                   reader: {
                         type: 'json',
                         root: 'items'
                   }
            }
        });
       
        new Ext.Component({
           autoScroll:true,
           renderTo: document.body,
           html: 'DOM ready!'
        });
       
       
     

var mainPanel = Ext.create('Ext.panel.Panel', {
     bodyStyle: "background-image:url(/images/Opera-Background-Blue-Swirls.jpg)",
    //width: 900,
    //height: 600,
    autoScroll:true,
    frame:true,
    //resizable:true,
    frameHeader:true,
   // headerPosition:'left',
    title: 'Container Panel 한글헤더',
    html:'html code here',
 
   items: [
       /*
       {
           xtype: 'panel',
           title: 'Child Panel 1',
           frame:true,
           frameHeader:true,
           headerPosition:'left',
           height: 200,
           width: '100%'
       },
       */
       {
           xtype: 'panel',
           title: 'Child Panel 2',
           height: 200,
           width: '100%',
           bodyStyle: "background-image:url(
                                      /images/pictures-of-beautiful-roses-14.jpg)",
           layout: {
                              type: 'hbox',
                              align: 'stretch'
                    },
           items:[
               {
                xtype: 'panel',
                title: 'child sub 1',
                height: 50,
                width: '50%',
                headerPosition:'left',
                margin: '5 5 5 5'
               },
                   {
                xtype: 'panel',
                title: 'child sub 2',
                height: 50,
                width: '50%',
                headerPosition: 'bottom',
                flex: 10
               }

           ]
       },
       {
          xtype: 'grid',
                   title: 'Simpsons',
                   store: Ext.data.StoreManager.lookup('simpsonsStore'),
                   columns: [
                             { text: 'Name',  dataIndex: 'name' },
                             { text: 'Email', dataIndex: 'email', flex: 1 },
                             { text: 'Phone', dataIndex: 'phone' }
                   ],
                   height: 200,
                   width: 400
       }
   ],
   listeners: {
       
   }

});

var viewPort = Ext.create('Ext.container.Viewport',{
        title:'viewport',
        bodyStyle: "background-image:url(/demo/images/Opera-Background-Blue-Swirls.jpg)",
        width: '95%',
        autoScroll:true,
        renderTo: Ext.getBody(),
        items: [mainPanel]
        });

        var  circlePanel = Ext.create('Ext.panel.Panel',{
                  title: 'Circle',
                  height : 200,
                  frame:true,
         resizable:false,
         frameHeader:true,
         html:'<br><br><br><br><br><img src="/demo/images/gear.png" width=50, height=50, class="circle1" id="circle" >'
        });
       
       
   
   
        console.log(circlePanel.id);

        mainPanel.add(circlePanel);

       
        var floatingPanel = Ext.create('Ext.panel.Panel',{
           //      title : 'floating Panel ',
          //       width : 600,
          //       height : 200,
                 frame : false,
                 floating : true,
                 html : '<iframe src="http://www.dailymotion.com/embed/video/xxawgk?logo=0&autoPlay=1&start=" width=820 height=600 frameborder=0 scrolling=no marginheight=0 marginwidth=0></iframe>'
        });
       
       
       
       var floatingButton = Ext.create('Ext.Button', {
                  text: 'Click me Floating Panel',
                  width : 500,
                  enableToggle: true,
                  toggleHandler : function (button,state){
                  console.log (button , state);
                  if (state){
                  floatingPanel.show();
                  this.setText('Click Me disable FloatingPanel hide!');
                  } else {
                  floatingPanel.hide();
                  this.setText('Click Me enable FloatingPaenl show');
                  }
                 
                  }
       });
     
       mainPanel.add(floatingButton);
     
       var circle = Ext.get('circle');
     
     
       console.log(circle);
       circle.syncFx();
       circle.animate({
         duration : 600000,
          to: {
               x: Ext.getBody().getWidth(),
               opacity: 0
          }
       });
     
         
});




댓글

댓글 쓰기

질문이나 의견은 요기에 남겨주세요 ^^,,

이 블로그의 인기 게시물

jquery css

(selector).css(name,value) (selector).css({properties}) (selector).css(name)   (select).css(name,value)    이 함수는 선택된 엘리먼트의 name 값을 value로 변경하는 일을 합니다 .  ex) $("p").css("background-color","yellow"  (select).css({properties})   이 함수는 한번에 여러개의 속성을 지정합니다 .  ex) $("p").css({"background-color":"yellow","font-size":"200%"})  (selector).css(name) 이 함수는 name 에 해당하는 스트일 값을 가져 옵니다.
자세한 내용 보기

Struts2의 작동 원리

이미지
Struts2의 작동 원리  Struts2 Framework Architecture Diagram  1. Client가 HttpServletRequest를 요청하면 FrontController인 FilterDispatcher가 받는다.  2. ActionMapper부터 ActionProxy 등을 거쳐 와서 Config 문서인 struts.xml 문서와 추가로 struts.properties 파일을 요구한다. struts.properties는 있으면 로딩하고 없으면 하지 않는다.(없어도 된다)  3. struts.xml과 strtus.properties문서를  Interceptor가 받아온다. 그리고 Client의 모든 Parameter를 가로챈다.  4. Interceptor 은 3단계로 나누어져 있다. 1단계에서는 Client의 모든 Paramter를 가로챈다. 2단계에서는 렌더링 역할을 수행한다.(언어 설정, 보안 설정 등) 3단계에서는 Action의 setter method 를 찾고, 데이터를 푸시하는 역할을 한다.(ActionForm이 필요없다)  5. Business Logic Controller인 Action에서 setter method 메소드를 받아서 비즈니스로직을 수행한다.  6. getter method를 통해 Result로 전달해주거나 받는다. Result에서 적절한 페이지를 선택한다. 이때 Template를 지정한다.(JSP, JSF, Velocity(확장자 : vm), FreeMarker(확장자 : ftl)) 적정할 Template를 잡아서 다시 Interceptor로 보낸다.(getter를 통해서 객체는 머든 상관없다)  7. 다시 역방향으로 간다. 1단계에서 Result에서 적절한 페이지를 선택할때, 그 페이지를 찾는다. 그리고 그 페이지의 Value Stack( 그림에는 없음 )을 갖고, Value Stack에다가 데이터를 넣주고 그냥 찍기만 하면 된다...
자세한 내용 보기

JSP/Servlet 한글 깨짐 처리 ?

getName.jsp <form method=post action="saveName.jsp" >       What's your name? <input type=text name=username size=20 >       <p><input type=submit /></p>     </form> saveName.jsp <%     request.setCharacterEncoding("euc-kr");  // 이눔을 해주니 한글이 잘들어온다     String name = request.getParameter("username");     session.setAttribute("theName",name);         out.println (name); %>
자세한 내용 보기