Search

'Programming/JavaScript, Sencha'에 해당되는 글 18건

  1. 2012.06.20 Sencha1 override
  2. 2012.06.16 Sencha1 이벤트 추가
  3. 2012.05.15 QueryTool - MyBatis, Spring, Sencha 게시판 자동으로 만들기 (1)
  4. 2012.03.13 Sencha1 - Tip
  5. 2009.05.13 JavaScript - Form Object 접근과 제어
  6. 2009.04.11 JavaScript - 주민번호 체크

Sencha1 override

Programming/JavaScript, Sencha 2012.06.20 10:43 Posted by 파란크리스마스

Sencha1에서 Carousel에 여러개 등록하고,
scrollToCard로 이동해도 2개 이상 이동이 되지 않습니다.

내부적으로 2개 이상 이동시 속도 저하가 있어서 그렇게 해둔것인지는 모르겠지만,
override하면 sencha 소스 자체를 수정하지 않고, 전체에 반영되도록 할 수 있습니다.

처음에는 sencha 소스를 수정 했는데,
secha가 업그레이드 될 경우 다시 수정해야 되는 번거로움은 사라졌습니다.

Ext.override

Ext.override(Ext.Carousel, {
    isCardInRange : function(card) {
        //return Math.abs(this.getCardIndexOffset(card)) <= 2; // 2개 이상 이동 제한 코드
    	return true;
    }
});

이동 메소드(참조용)

      seek : function(index) {
		var oldCard = this.getActiveItem();
		var next = this.items.items[index];
        if (next) {
            this.customDrag = true;
            this.scrollToCard(next);
            //this.onCardSwitch(next, oldCard, index, true);
        }
        return this;
	},
신고

Sencha1 이벤트 추가

Programming/JavaScript, Sencha 2012.06.16 17:04 Posted by 파란크리스마스

Sencha에서 사용자 정의 이벤트를 만드는 방법을 정리해보았습니다.

객체 선언시 addEvents 메소드로 이벤트를 등록하고,
fireEvent 메소드로 이벤트 호출하고,
리스너에서 이벤트를 받아서 처리하면 됩니다.

이벤트 등록

this.addEvents('OnLoadImage');

이벤트를 리스너 등록

listeners: {
  OnLoadImage: function(panel, index, imgUrl) {
    //alert('ImageUrl' + src);
  }
}

이미지 번호로 이미지 URL 정보를 얻었을 경우 이벤트 호출

this.fireEvent('OnLoadImage', this, this.getActiveIndex(), imgUrl);

소스

Jarvus.mobile.PinchCarousel = Ext.extend(Ext.Carousel, {

  initComponent : function() {
    // shryu
    this.addEvents('OnLoadImage');
  },

  doLoadImage(imageNo) {
    Ext.Ajax.request({
      url : json_url,
      params : {
        cmd : 'getImageUrl',
        imgno : imageNo
      },
      success : function(response, opts) {
        var JsonData = JSON.parse(response.responseText);
        if (JsonData.data.err == "") {
          OnLoadImage(JsonData.data.imgUrl);
        } else {
          return false;
        }
      }
    });
  },

  // shryu
  OnLoadImage : function(imgUrl) {
    //alert('OnLoadImage = ' + this.getActiveIndex() + '/' + imgUrl);
    this.fireEvent('OnLoadImage', this, this.getActiveIndex(), imgUrl);
  }
}

var pinchCarousel = new Jarvus.mobile.PinchCarousel({
  listeners: {
    OnLoadImage: function(panel, index, imgUrl) {
      //alert('ImageUrl' + src);
    }
  }
});
신고

QueryTool 실행해서 테이블 목록에서 테이블를 오른쪽 마우스를 선택해서 MyBatis Java Class 생성를 선택한다.

MyBatis Java Class 생성 선택

옵션 설정

MyBatis Java 패키지 경로 설정

게시판 정보 설정

테이블 타이블 : 게시판 이름으로 사용됨
Comment에 반경 버튼 : 테이블 타이틀에 작성한 내용을 선택한 테이블의 주석으로 반영(Database에 반영)
페이지 사이즈 : 게시판 리스트의 한 페이지당 개수
기본폴더 : Web 주소의 prefix

게시판 리스트 설정

View : 리스트에 출력되는 컬럼 선택
Mian : 리스트의 메인(타이틀이나 제목)이 되는 컬럼 선택
Column : 컬럼명
Title : 게시판 저장 화면에서 출력되는 타이블명
Title값 Comment에 반영 : 작성한 주석의 내용을 Database에 반영

게시판 저장 항목 선택

게시판에 저장할 컬럼을 선택한다.

OK 버튼을 선택하면 MyBatis 텝에 MyBastic 관련 Java 클래스와 xml 파일이 생성됨

 

domain 클래스(자동으로 생성된 코드)

package itg.retis.db.domain;

import java.sql.Date;
import java.sql.Timestamp;

import bluexmas.util.DateUtils;
import net.sf.json.JSONObject;

public class CodeType {

  // pk
  private String type_id;
  
  private String type_name;
  private String type_desc;
  private String is_lock;
  private String is_visible;
  
  public void setType_id(String type_id) {
    this.type_id = type_id;
  }
  public String getType_id() {
    return this.type_id;
  }
  public void setType_name(String type_name) {
    this.type_name = type_name;
  }
  public String getType_name() {
    return this.type_name;
  }
  public void setType_desc(String type_desc) {
    this.type_desc = type_desc;
  }
  public String getType_desc() {
    return this.type_desc;
  }
  public void setIs_lock(String is_lock) {
    this.is_lock = is_lock;
  }
  public String getIs_lock() {
    return this.is_lock;
  }
  public void setIs_visible(String is_visible) {
    this.is_visible = is_visible;
  }
  public String getIs_visible() {
    return this.is_visible;
  }
  public JSONObject getJSONObject() {
    JSONObject jobj = new JSONObject();
    jobj.put("type_id", this.type_id);
    jobj.put("type_name", this.type_name);
    jobj.put("type_desc", this.type_desc);
    jobj.put("is_lock", this.is_lock);
    jobj.put("is_visible", this.is_visible);
    return jobj;
  }
}

persistence 클래스(자동으로 생성된 코드)

package itg.retis.db.persistence;

import java.util.List;
import java.util.Map;

import itg.retis.db.domain.CodeType;

public interface CodeTypeMapper {

  public CodeType selectCodeType(Map<STRING, Object> params);

  public void insertCodeType(CodeType codeType);

  public void updateCodeType(CodeType codeType);

  public void deleteCodeType(Map<STRING, Object> params);

  public int getCount();

  public List<CODETYPE> listCodeType(Map<STRING, Integer> map);

}

service 클래스(자동으로 생성된 코드)

package itg.retis.db.service;

import itg.retis.db.domain.CodeType;
import itg.retis.db.persistence.CodeTypeMapper;

import java.util.HashMap;
import java.util.Map;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class CodeTypeService {

  public final static int pagerowcnt = 25;

  @Autowired
  private CodeTypeMapper codeTypeMapper;

  public CodeType selectCodeType(String typeId) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("type_id",typeId);
    return codeTypeMapper.selectCodeType(params);
  }

  public void insertCodeType(CodeType codeType) {
    codeTypeMapper.insertCodeType(codeType);
  }

  public void updateCodeType(CodeType codeType) {
    codeTypeMapper.updateCodeType(codeType);
  }

  public void deleteCodeType(String typeId) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("type_id",typeId);
    codeTypeMapper.deleteCodeType(params);
  }

  public int getCount() {
  	return codeTypeMapper.getCount();
  }

  public List<CodeType> listCodeType(int page) throws Exception {
  	Map<String, Integer> params = new HashMap<String, Integer>();
    params.put("page", page);
    params.put("pagerowcnt", pagerowcnt);
    return codeTypeMapper.listCodeType(params);
  }

}

MyBatis xml 파일(자동으로 생성된 코드)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="itg.retis.db.persistence.CodeTypeMapper">

  <!-- selectCodeType -->
  <select id="selectCodeType" parameterType="map" resultType="itg.retis.db.domain.CodeType">
    select type_id
           ,type_name
           ,type_desc
           ,is_lock
           ,is_visible
      from code_type
     where type_id = #{type_id}
  </select>

  <!-- updateCodeType -->
  <update id="updateCodeType" parameterType="itg.retis.db.domain.CodeType" statementType="PREPARED">
      update code_type
        <trim prefix="SET" suffixOverrides=",">
          <if test="type_name != null">type_name = #{type_name, jdbcType=VARCHAR} ,</if>
          <if test="type_desc != null">type_desc = #{type_desc, jdbcType=VARCHAR} ,</if>
          <if test="is_lock != null">is_lock = #{is_lock, jdbcType=VARCHAR} ,</if>
          <if test="is_visible != null">is_visible = #{is_visible, jdbcType=VARCHAR} ,</if>
        </trim>
     where type_id = #{type_id}
  </update>

  <!-- insertCodeType -->
  <insert id="insertCodeType" parameterType="itg.retis.db.domain.CodeType" statementType="PREPARED">
      insert into code_type(
        <trim suffixOverrides=",">
          <if test="type_id != null">type_id ,</if>
          <if test="type_name != null">type_name ,</if>
          <if test="type_desc != null">type_desc ,</if>
          <if test="is_lock != null">is_lock ,</if>
          <if test="is_visible != null">is_visible ,</if>
        </trim>
        ) values	(
        <trim suffixOverrides=",">
          <if test="type_id != null">#{type_id, jdbcType=VARCHAR} ,</if>
          <if test="type_name != null">#{type_name, jdbcType=VARCHAR} ,</if>
          <if test="type_desc != null">#{type_desc, jdbcType=VARCHAR} ,</if>
          <if test="is_lock != null">#{is_lock, jdbcType=VARCHAR} ,</if>
          <if test="is_visible != null">#{is_visible, jdbcType=VARCHAR} ,</if>
        </trim>
        )
  </insert>

  <!-- deleteCodeType -->
  <delete id="deleteCodeType" parameterType="map" statementType="PREPARED">
      delete from code_type
     where type_id = #{type_id}
  </delete>

  <!-- getCount -->
  <select id="getCount" resultType="int">
    select count(*)
      from code_type
  </select>

  <!-- listCodeType -->
  <select id="listCodeType" parameterType="map" resultType="itg.retis.db.domain.CodeType">
    select * 
      from ( select t1.*, ceil( rownum / #{pagerowcnt}) as page 
               from (select * 
                       from code_type
                      order by type_id
                    ) t1 
           ) 
     where page = #{page} 
  </select>

</mapper>

JSONData 클래스(자동으로 생성된 코드)

package itg.retis.db.json;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import itg.retis.db.domain.CodeType;
import itg.retis.db.service.CodeTypeService;
import itg.retis.util.BeanUtils;
import bluexmas.util.DateUtils;
import bluexmas.util.DataUtils;

public class JSONCodeType implements JSONData {

  private CodeTypeService service;

  @Override
  public JSONObject getJSON(HttpServletRequest request, HttpServletResponse response) {

    service = (CodeTypeService)BeanUtils.getBean("codeTypeService");

    String subcmd = request.getParameter("subcmd");
    JSONObject jobj_data = null;
    if (subcmd.equals("add")) {
      jobj_data = getAddData(request, response);
    } else if (subcmd.equals("edit")) {
      jobj_data = getEditData(request, response);
    } else if (subcmd.equals("list")) {
      jobj_data = getListData(request, response);
    } else if (subcmd.equals("info")) {
      jobj_data = getInfoData(request, response);
    }
    return jobj_data;
  }

  public JSONObject getAddData(HttpServletRequest request, HttpServletResponse response) {

    CodeType codeType = new CodeType();
    try {
      codeType.setType_id(request.getParameter("type_id"));
      codeType.setType_name(request.getParameter("type_name"));
      codeType.setType_desc(request.getParameter("type_desc"));
      codeType.setIs_lock(request.getParameter("is_lock"));
      codeType.setIs_visible(request.getParameter("is_visible"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    try {
      service.insertCodeType(codeType);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "error !!! " + e.toString(); // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  public JSONObject getEditData(HttpServletRequest request, HttpServletResponse response) {

    CodeType codeType = new CodeType();
    try {
      codeType.setType_id(request.getParameter("type_id"));
      codeType.setType_name(request.getParameter("type_name"));
      codeType.setType_desc(request.getParameter("type_desc"));
      codeType.setIs_lock(request.getParameter("is_lock"));
      codeType.setIs_visible(request.getParameter("is_visible"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    try {
      service.updateCodeType(codeType);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "error !!! " + e.toString(); // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  public JSONObject getListData(HttpServletRequest request, HttpServletResponse response) {

    int pagerowcnt = 20;
    int pageIndex = 1;
    try {
      pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    int rowCount = service.getCount();

    if (pageIndex<1) {
      pageIndex = 1;
    }

    JSONArray arrayObj = new JSONArray();

    List<CodeType> dataList = null;
    String errStr = null;
    try {
      dataList = service.listCodeType(pageIndex);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "조회오류 !!! 데이터베이스 접속정보를 확인해 보세요."; // e.toString();
    }

    if (dataList!=null) {
      for (int i=0; i<dataList.size(); i++) {
        CodeType codetype = dataList.get(i);
        arrayObj.add(codetype.getJSONObject());
      }
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("list", arrayObj);
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    if (dataList!=null) {
      jobj_data.put("currentPage", pageIndex);
      jobj_data.put("total", rowCount);
      jobj_data.put("pageSize", pagerowcnt);
    }
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  // Info
  public JSONObject getInfoData(HttpServletRequest request, HttpServletResponse response) {

    // pk
    String type_id = null;
    try {
        type_id = request.getParameter("type_id");
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    CodeType infoObj = null;
    try {
      infoObj = service.selectCodeType(type_id);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "조회오류 !!! 데이터베이스 접속정보를 확인해 보세요."; // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("info", infoObj.getJSONObject());
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }
}

JSONFactory 클래스에 JSONData 클래스가 반환 되도록 코드 추가
(사용자가 코드 추가)

package itg.retis.db.json;

public class JSONFactory {
	
	public static JSONData getJSONData(String cmd) {
		
		System.out.println("JSONFactory = " + cmd);

		if (cmd.equals("CodeType")) {   // 1 <-- 여기 두줄 추가
			return new JSONCodeType();  // 2
		} else {
			return new JSONSample();	
		}
	}
}

json 서블릿 호출하여 json data가 올바르게 전달되는지 확인

Sencha 텝에서 게시판 JavaScript 확인

code_type_list.js 소스 (자동으로 생성된 코드)

Ext.ns("ns_code_type_list");

ns_code_type_list.init = function(){

    var dataList;
    var dataStore;
    var pagingToolbar;
    var writeToolbar;

    Ext.regModel('dataModel', {
        fields: ['type_id','type_name','type_desc','is_lock','is_visible']
    });

    dataStore = new Ext.data.Store({
        model: 'dataModel',
        jsonData: [ currentPage = 1 ],
        data: [ ]
    });

    dataList = new Ext.List({
        title: 'CodeType목록',
        store: dataStore,
        scroll: false, // <-- 여기 중요
        layout:'fit', // <-- 여기 중요
        blockRefresh:true,
        onItemDisclosure: {
            handler: function(record, btn, index) {
                //alert(record.get('no'));
                ns_code_type_write.init();
                ns_code_type_write.panel.getInfoData(record.get('type_id'));
                main.MainPanel.setActiveItem(ns_code_type_write.panel, "slide");
            }
        },
        itemTpl:'{type_id} / {type_name} / {type_desc} / {is_lock} / {is_visible}'
    });

    function setList(aJsonData) {
        dataStore = new Ext.data.Store({
            model : 'dataModel',
            data : aJsonData.data.list,
            clearOnPageLoad : true,
            jsonData : aJsonData,
            previousPage: function() {
            	this.jsonData.currentPage = this.jsonData.currentPage - 1;
            	ns_code_type_list.panel_list.getList();
            },
            nextPage: function() {
            	this.jsonData.currentPage = this.jsonData.currentPage + 1;
            	ns_code_type_list.panel_list.getList();
            },
            loadPage: function(page) {
            	this.jsonData.currentPage =  page;
            	ns_code_type_list.panel_list.getList();
        	}
        });
        pagingToolbar.store = dataStore;
        pagingToolbar.handleStoreLoadSH(dataStore, true);

        dataList.bindStore(dataStore);

        ns_code_type_list.panel_list.scroller.scrollTo({
            x: 0,
            y: 0
        });
    };

    pagingToolbar = new Ext.ux.touch.PagingToolbar({
        ui: "charcoal",
        store : dataStore
    });

    writeToolbar = new Ext.Toolbar({
    		ui: "charcoal",
        items: [
        	{ xtype: 'spacer' },
          { text: '등록',
            handler:function() {
              ns_code_type_write.init();
           	 main.MainPanel.setActiveItem(ns_code_type_write.panel, "slide");
          	 }
          }
        ]
    });

    //
    dataStore.on('load', pagingToolbar.handleStoreLoad, pagingToolbar);

    ns_code_type_list.panel_list = new Ext.Panel({
        useCurrentLocation: true,
        scroll:'vertical',
        cardSwitchAnimation:"cube",
        getList:function()
        {
            Ext.Ajax.request({
                url: 'json',
                params : {
                    cmd : 'CodeType',
                    subcmd : 'list',

                    pageIndex : dataStore.jsonData.currentPage
                },
                success: function(response, opts) {
                    //console.log(response.responseText);
                    var JsonData = JSON.parse(response.responseText);
                    //console.log(JsonData);
                    if(JsonData.data.err == "") {
                        setList(JsonData);
                    } else {
                        alert(JsonData.data.err);
                    }
                }
            });
        },
        items:
        [{
            xtype: 'fieldset',
            instructions: 'CodeType목록 입니다. ',
            defaults: {
                labelAlign: 'left'
            },
            items: [
            	dataList,
            	pagingToolbar,
            	writeToolbar
            ]
        }]
    });
}

code_type_write.js 소스 (자동으로 생성된 코드)

Ext.ns("ns_code_type_write");

ns_code_type_write.init = function() {

  var m_subcmd = 'add';
  var m_type_id = "";

  ns_code_type_write.panel = new Ext.form.FormPanel({
    scroll : 'vertical',
    standardSubmit : false,
    title : 'Guestbook',
    items : [{
      xtype : 'fieldset',
      id : 'code_type_form',
      title : '코드타입 등록',
      // instructions: 'Please complete the information.',
      defaults : {
        labelAlign : 'left',
        labelWidth : '120'
      },
      items : [
      {
        xtype : 'textfield',
        id : 'type_id',
        label : '타입아이디',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'type_name',
        label : '타입명',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'type_desc',
        label : '설명',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'is_lock',
        label : '잠금여부',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'is_visible',
        label : '보여짐여부',
        useClearIcon : true
      }
            ]
    },
    {
      layout : {
        type : 'hbox',
        pack : 'center'
      },
      flex : 2,
      style : 'margin: .5em;',
      items : [ {
        xtype : 'button',
        ui : 'decline-round',
        id : 'btnAdd',
        name : 'btnAdd',
        handler : function() {
          Ext.Ajax.request({
            url: 'json',
            params : {
              cmd : 'CodeType',
              subcmd : m_subcmd,

              type_id : Ext.getCmp("type_id").getValue(),
              type_name : Ext.getCmp("type_name").getValue(),
              type_desc : Ext.getCmp("type_desc").getValue(),
              is_lock : Ext.getCmp("is_lock").getValue(),
              is_visible : Ext.getCmp("is_visible").getValue(),
            },
            success : function(response, opts) {
              //console.log(Ext.getCmp("login.user_id"));
              //console.log(response.responseText + Ext.getCmp("login.user_id").value);
              var JsonData = JSON.parse(response.responseText);
              console.log(JsonData);
              if (JsonData.data.err == "") {
                if (JsonData.data.result == "N") {
                  alert(JsonData.data.err);
                } else {
                  alert('등록이 완료 되었습니다.');
                  ns_code_type_list.panel_list.getList();
                  main.MainPanel.setActiveItem(ns_code_type_list.panel_list, "slide");
                }
              } else {
                alert(JsonData.data.err);
              }
            }
          });
        },
        text : '작성완료'
      } ]
    }],

    getInfoData : function(aTYPE_ID) {
      Ext.getCmp("code_type_form").setTitle('코드타입 수정');
      Ext.getCmp("btnAdd").setText('정보수정');
      m_subcmd = "edit";
      // alert('no = ' + ano);
      m_TYPE_ID = aTYPE_ID;
      Ext.Ajax.request({
        url: 'json',
        params : {
          cmd : 'CodeType'
          ,subcmd : 'info'
          ,type_id : aTYPE_ID
        },
        success : function(response, opts) {
          //console.log(response.responseText);
          var JsonData = JSON.parse(response.responseText);
          //console.log(JsonData);
          if (JsonData.data.err == "") {
            Ext.getCmp("type_id").setValue(JsonData.data.info.type_id);
            Ext.getCmp("type_name").setValue(JsonData.data.info.type_name);
            Ext.getCmp("type_desc").setValue(JsonData.data.info.type_desc);
            Ext.getCmp("is_lock").setValue(JsonData.data.info.is_lock);
            Ext.getCmp("is_visible").setValue(JsonData.data.info.is_visible);
          } else {
            alert(JsonData.data.err);
          }
        }
      });
    }
  });
}

확인 - 리스트

 

확인 - 저장

확인 - 조회 및 수정

마무리  

이 툴을 만들 당시 Sencha 2가 나왔기 때문에 현재 버전은 Sencha 1 버전으로만 생성이 되네요.
시간이 된다면 Sencha2 지원과 json 데이터 호출 ajax 부분도 php로 구현하고 하고 싶네요.

php json 호출 템플릿을 제공 하실분이 있으면 언제든지 연락주세요.

신고

Sencha1 - Tip

Programming/JavaScript, Sencha 2012.03.13 23:11 Posted by 파란크리스마스

- Ext.Panel의 높이 구하기 : myPanel.container.getHeight()
- dockedItems 첫번째 아이템 타이틀 수정 : this.dockedItems.items[0].setTitle('타이틀수정');
- 오늘날짜구하기 : var currentDate = new Date();
- 문자형날짜값을 날짜형으로 : Date.parseDate(JsonData.data.info.start_date, 'c')
- items 찾기 : writeToolbar.items.get('btnAdd').enable(); / writeToolbar.getChildItemById('btnAdd').disable();
- store record 삭제 : employee_submenu.panel_submenu.getListBox().store.removeAt(2);
- xtype : 'selectfield' option 동적추가 : this.items.get("emp.join").items.get("role").store.add({ text : '슈퍼바이저', value : '01' });

- Ext.data.Store 데이터추가

dataStore = new Ext.data.Store({ // 생략 
dataStore.add({"id": global_user_com_id, "comment": Ext.getCmp("txtComment").getValue()});

- Sencha Ext.XTemplate 데이터 적용시 replace

itemTpl : new Ext.XTemplate(
    '<TPL for=".">',
        '<DIV class=gcomment>',
            '<DIV class=gcomment-title>',
                '<SPAN class=id>{regid}</SPAN><SPAN class=date>{regdate:date("Y년 m월 d일")}</SPAN>',
            '</DIV>', 
            '<DIV class=gcomment-content>',
                '<P>{comment:this.linkify}</P>', 
            '</DIV>', 
        '</DIV>',
    '</TPL>', 
    {
        linkify : function(value) {
            return value.replace(/\n/g, "<br />");
        }
    }
)

- Sencha Ext.XTemplate 데이터 적용시 데이터변환

itemTpl:new Ext.XTemplate(
    '<div class="tweet-bubble">',
        '<div class="tweet-content">',
            '<h1>{title}</h1>',
            '<span>일정 {sdate:this.toDate} ~ {edate:this.toDate}</span>',
        '</div>',
    '</div>',
    '<div class="ttttt">',
        '<p>{insert_date:date("Y년 m월 d일")}</p>',
    '</div>',
    {
        toDate: function(values) {
            return values.substr(0, 4) + '년 ' + values.substr(4, 2) + '월 ' + values.substr(6, 2) + '일';
        }
    }
),              
listeners: {
    selectionchange: function(sel, records) {
        if (records[0] !== undefined) {
            alert(records[0].data.id);
        }
    }
}

Ext.ux.Image

Ext.ux.Image = Ext.extend(Ext.Component, {

    url : Ext.BLANK_IMAGE_URL,  //for initial src value
    
    //cls : 'con_preview',
    
    scale : 1,
    
    style : 'text-align: center;',
    
	html: [
		'<img>'
	],

	initComponent: function() {
		Ext.ux.Image.superclass.initComponent.apply(this, arguments);
		
		this.on('afterrender', this.initViewer, this, {delay: 10, single: true});
		
		this.addEvents('load');
	},
	
	initViewer: function() {
		// retrieve DOM els
		this.imgEl = this.el.down('img');

		this.imgEl.setStyle({
			'-webkit-user-drag': 'none'
			,'-webkit-transform-origin': '0 0'
			,'visibility': 'hidden'
		});

		
		this.el.setStyle({
			//backgroundImage: 'url('+this.previewSrc+')',
			backgroundPosition: 'center center'
			,backgroundRepeat: 'no-repeat'
			,webkitBackgroundSize: 'contain'
		});

		// attach event listeners
		this.mon(this.imgEl, {
			scope: this
			,load: this.onLoad
			//,doubletap: this.onDoubleTap
			//,pinchstart: this.onImagePinchStart
			//,pinch: this.onImagePinch
			//,pinchend: this.onImagePinchEnd
		});


		// load image
		if(this.url) {
			this.setSrc(this.url);	
		}
	},
 

    onLoad: function() {
    	
		this.viewportWidth = this.viewportWidth || this.getWidth() || this.ownerCt.body.getWidth();
		this.viewportHeight = this.viewportHeight || this.getHeight() || this.ownerCt.body.getHeight();
			
		// grab image size
		this.imgWidth = this.imgEl.dom.width
		this.imgHeight = this.imgEl.dom.height;
				
		// calculate and apply initial scale to fit image to screen
		if(this.imgWidth > this.viewportWidth || this.imgHeight > this.viewportHeight)
			this.scale = this.baseScale = Math.min(this.viewportWidth/this.imgWidth, this.viewportHeight/this.imgHeight);
		else
			this.scale = this.baseScale = 1;
		
		// set initial translation to center
		this.translateX = this.translateBaseX = (this.viewportWidth - this.baseScale * this.imgWidth) / 2;
		this.translateY = this.translateBaseY = (this.viewportHeight - this.baseScale * this.imgHeight) / 2;
		
		// show image and remove mask
		this.imgEl.setStyle({ visibility: 'visible' });

		var baseWidth = Math.min(this.viewportWidth, 480);

		this.scale = baseWidth / this.imgWidth;			  					
		
		var boundWidth = this.imgWidth * this.scale;
		var boundHeight = this.imgHeight * this.scale;
		
		this.setHeight(boundHeight);
		
		this.imgEl.setStyle({
			width: boundWidth + 'px'
			,height: boundHeight + 'px'
		});

        this.fireEvent('load', this);
    },
 
    setSrc: function(url) {
    	if(this.imgEl)
			this.imgEl.dom.src = url;
		else
			this.url = url;
			
	},
    
    onStateChange : function(request) {
        if (request && request.xhr && request.xhr.readyState == 4) {
            this.clearTimeout(request);
            this.onComplete(request);
            this.cleanup(request);
        }
    }
});

Dispatching an event on image click in Sencha Touch

	var panel223 = new Ext.Panel({		
		bodyStyle: 'background-image:url(img/mobile_bg.png); background-repeat:repeat',
		scroll: false,
		html : 
			'<table class="duty_view" style="width:100%;padding-top: 9px;">' +
			'<tr><td align="center" style="padding-top: 9px;" colspan="2"><img src="'+common_url+'img/logo.png" width="100%"/></td></tr>' +
			'<tr><td class="txt2" align="center">' +
			'<a style="width:150px" class="large button blue" id="btnApt">APT</a></td><td class="txt2" align="center">'+
			'<a style="width:150px" class="large button blue" id="btnBuilding">Building</a></td></tr>' +			
			'</table>',
			listeners: {
				render: function(c, records){
					c.getEl().on('click', function(event, el){
						alert(el.id);
					}, c, {stopEvent: true});
	 			}
			}
	});


신고
TAG Sencha1, TIP

JavaScript - Form Object 접근과 제어

Programming/JavaScript, Sencha 2009.05.13 10:57 Posted by 파란크리스마스
출처 : http://igniter.egloos.com/7306760

//
document.forms["form1"].elements["userid"]; 

// 
var obj = document.getElementById("userid");

//
var frm = document.forms["form1"];
for ( i=0; i < frm.length; i++){ 
  var type = "element type : " + frm[i].type + "\n\n";
  var name = "element name : " + frm[i].name + "\n\n"; 
  var value = "element value : " + frm[i].value + "\n\n"; 

신고

JavaScript - 주민번호 체크

Programming/JavaScript, Sencha 2009.04.11 18:52 Posted by 파란크리스마스

출처 : http://blog.naver.com/mini0076/130003885121
http://cafe.chosun.com/club.menu.bbs.read.screen?page_num=1&p_club_id=itmania&p_menu_id=9&message_id=488185

1. 정보 입력시 자동으로 입력폼 이동하기

<html>
<head>
<script language="javascript">
<!--
function check()
{
  var str = document.jumin.jumin1.value.length;
  if(str == 6)
     document.jumin.jumin2.focus();
}
-->
</script>
</head>

<body>
<form name="jumin">
<h2>주민등록 입력</h2>
<input type="text" name="jumin1" size="6" Maxlength="6" OnKeyPress="check();" class="inputtext"> -
<input type="text" name="jumin2" size="7" Maxlength="7" class="inputtext">
</body>
</html>

2. Button을 이용하여 웹페이지 이동

<script language="javascript">
<!--
function popup_new(is_insert, pid)
{
 var str;
 str="master_editing_pop_set.jsp?is_insert="+is_insert+"&pid=" +pid ;
 document.location.href = str;
 //window.open(str,'팝업설정','width=800,height=480 scrollbars=1');
}
-->
</script>
 
       <tr>
        <td height="40" align="center"><label>
          <input type="button" onclick="popup_new('Y', '');" value="팝업설정" />
        </label></td>
      </tr>




- end -

신고


 

티스토리 툴바