기본 콘텐츠로 건너뛰기

12월, 2013의 게시물 표시

크리스마스 이브 잘 보내고 있으신가요?

오늘 크리스마스 이브라 더 사람 많은거 같아요.
여기는 대전에있는 로보쿡입니다 .! 
아쉽게 화이트 크리스 마스는 아니지만다들 모두 즐거운 크리스마스 되세요.

Angular JS 용어 정리

Html JavaScript CSS <divng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span>     [ <ahref=""ng-click="archive()">archive</a> ] <ulclass="unstyled"> <ling-repeat="todo in todos"> <inputtype="checkbox"ng-model="todo.done"> <spanclass="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <formng-submit="addTodo()"> <inputtype="text"ng-model="todoText"size="30"placeholder="add new todo here"> <inputclass="btn-primary"type="submit"value="add"> </form> </div> function TodoCtrl($scope) {     $scope.todos = [         {text:'learn angular', done:true}, {text:'build an angular app', done:false}     ];
    $scope.addTodo = function() {         $scope.todos.push({text:$scope.todoText, done:false});     …

Angular JS

<!doctypehtml> <htmlng-app> <body>         <head> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js">             </script>         </head> <div> <label>Name:</label> <inputtype="text"ng-model="yourName"placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body>
</html>


Angular JS의 가장 기초의 부분중 하나인 선언방식입니다 Jquery 를 주로 사용해보았는데 요즘 뜨는 AngularJS를 공부하면서 포스팅을 해보도록하겠습니다.
실 작동(reality work) URL[http://jsfiddle.net/Kwangheum/LLsFy/]

오눌 동지인데 다들 팥죽은 드셨나요?

여러분 오늘 드디어 동지입니다. 옛말에 동지때 팥죽을 먹어야 한살이 더 먹고 귀신도 멀리할 수 있다고 합니다:) 다들 추운데 건강 챙기세요

IE 문서모드 관련

<metahttp-equiv="X-UA-Compatible"content="옵션"/>
해당 소스는 IE8이 나오면서 생긴 문서 모드 변경하는 법이다.
옵션

1.버전별로 할 수 있으며 IE5~IE10까지는 가능하다.

2.Emulate라는 속성이있는데 에뮬레이션 모드로 지정된 DOCTYPE 에 따라 표준모드나 관용모드로 렌더링 되는 옵션이다.

3.Edge 라는 속성은 DOCTYPE에 상관없이 IE8 이상 버전에서 최신 표준 모드로 렌더링 되는 옵션이다.

예)
<metahttp-equiv="X-UA-Compatible"content="IE=8;"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=Edge;"/>
하지만 새로나온 IE 11에서는 사용이 불가하다
IE11이되면서 콘솔창에 'navigator.userAgent' 명령어를 쳐서 보면 예전에 IE이라면 'MSIE'라는게 있었지만
11부터는 호환가능("compatible") 및 브라우저("MSIE")토큰이 제거가 되면서 rv라는게 생겼다.

앞으로 익스플로러 새로 나올때  rv:11.0처럼 rv:12.0 이런 식으로 나올듯 싶다.
스크립트에서 익스 찾을때 MSIE로 정규표현식을 쓴 프로젝트들이 있다면 발 빠르게 바꾸는것이 좋을 거 같다.


<!--[if lt IE 9]>
<![endif]-->
이거와 같이 html 에서 IE 이상 또는 이하일때 파일을 갖고오는것을 썼는데 11부터는 IE를 RV로 고쳐서 쓰면된다

<!--[if lt RV 11]>
<![endif]-->

눈온다 ㅠㅠ 어떻게 집에 가지??

회사에서 야근중인데 눈온다는 소식듣고
밖을보니까... 꽤나 눈이 쌓여있네 ㅠㅠ
좀더 하고 집에 가야지...
길이 안미끄럽길 바란다!!!!

Ext JS 4.2 트리 노드 추가 및 스크롤 이동

Ext.require(['*']); Ext.onReady(function(){ var addButton = Ext.create('Ext.Button', {         text: '노드 추가(Add Node)',         scale: 'large',         listeners: {         el: {             click: function() { var thisNode = Ext.getCmp('xAxisTreeUse').getRootNode().appendChild({ "text":"노드 이름(Node name)"         });                 Ext.getCmp("tree").selectPath(thisNode.getPath());             }         }     }); var  store = Ext.create('Ext.data.TreeStore', {             id: 'store',             proxy: {             data : data             type:'memory',             reader:{                 type:'json'             }         },         root: {             text: "ROOT",             id: "ROOT",             expanded: true         }     }); var tree = Ext.create('Ext.tree.Panel', {         id: 'tree',         rootVisible: true,         multiSelect: false,  …

Ext JS 4.2 트리 드래그 & 드롭

var tree = Ext.create('Ext.tree.Panel', { id:"gridTree",     autoHeight:true,     renderTo: Ext.get('dataArea'),     useArrows: false,     rootVisible: false,     store: store,     multiSelect: true,     rowLines:true,
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            enableDrag: true,
            enableDrop: true
        }
    },
    multiSelect: true,
    renderTo: Ext.get('tree') });

실 작동 URL[http://jsfiddle.net/Kwangheum/sCRzF/1/]










Ext JS 4.2 트리 1.Ext JS 4.2 트리 기본구조 2.Ext JS 4.2 트리 이름 변경하기 3.Ext Js 4.2 트리 그리드 에디팅 4.Ext JS 4.2 트리 드래그 & 드롭
5.Ext JS 4.2 트리 노드 추가 및 스크롤 이동





Ext JS 4.2 트리 그리드 에디팅

var tree = Ext.create('Ext.tree.Panel', { id:"gridTree",     autoHeight:true,     renderTo: Ext.get('dataArea'),     useArrows: false,     rootVisible: false,     store: store,     multiSelect: true,     plugins: [ Ext.create('Ext.grid.plugin.CellEditing', {             clicksToEdit: 1         })     ],     rowLines:true,     columns: 컬럼(column)
}); tree.on('validateedit', function(editor, e) { if(e.record.data[e.field]==e.value){         e.cancel = true;     } });
tree.on('edit', function(e){     console.log("필드 값(field value)"+e.context.field);     console.log("이전 값(before value)"+e.context.originalValue);     console.log("현재 값(now value)"+e.context.value); });



필자는 그리드에서 수정 된것을 'validateedit'라는 좋은 옵션이 있는데 'edit' 에서 하고있었다.
Ext Js 에서는 수정을 한 후 적용 전에 벨리데이션을 하는 곳이 따로 존재하였다.
그래서 'edit'에서 벨리데이션을 했던 모든 내용을 'validateedit'로 옮겼다.

실 작동 URL[http://jsfiddle.net/Kwangheum/SgmyP/2/]










Ext JS 4.…

Ext JS 4.2 트리 이름 변경하기

var store = Ext.create('Ext.data.TreeStore', {
id: 'treeStore',      proxy: {
          data : 'data',
          type:'memory',
          reader:{type:'json'}
     },
     root: {
text: "text", id: "id",           expanded: true
     },
listeners: {
          update: function(st, rec, op, modFldNames) {
               console.log("트리에서 글 수정 후 여기를 탑니다.");
          }
     }

}); var yAxisTreeAll = Ext.create('Ext.tree.Panel', {      id: 'treeId',
     rootVisible: true,      multiSelect: false,      store: store,      height: 600,      plugins: 'cellediting',      columns: [{           xtype: 'treecolumn',           dataIndex: 'text',           flex: 1,           editor: {               xtype: 'textfield',               allowBlank: false,               allowOnlyWhitespace: false           } }],
     renderTo: Ext.get('원하는 엘리먼트 아이디값(html element id)')
});

Cellediting 이라는 플러그인을 사용하여 트…

Ext JS 4.2 트리 기본 구조

Ext.require(['*']); Ext.onReady(function(){ var  store = Ext.create('Ext.data.TreeStore', {             id: 'store',             proxy: {             data : data             type:'memory',             reader:{                 type:'json'             }         },         root: {             text: "ROOT",             id: "ROOT",             expanded: true         }     }); var tree = Ext.create('Ext.tree.Panel', {         id: 'tree',         rootVisible: true,         multiSelect: false,         store: store,         height: 600,         renderTo: Ext.get('treeList')     });
 });

필자가 생각하기에 Ext Js 트리 가장 기본 옵션인거 같다.

실 작동 URL[http://jsfiddle.net/Kwangheum/vkbSS/]









Ext JS 4.2 트리 1.Ext JS 4.2 트리 기본구조 2.Ext JS 4.2 트리 이름 변경하기 3.Ext Js 4.2 트리 그리드 에디팅 4.Ext JS 4.2 트리 드래그 & 드롭
5.Ext JS 4.2 트리 노드 추가 및 스크롤 이동






It's me

안녕하세요 여러분,

드디어 웹 프로그래머로 뛰어든지 1년이 지나가고있습니다.

정신없이 일년이 지나갔는데 머리에만 담아두었던 내용들

잊어버릴 경우가 종종 많아서 이제부터 블로그를 시작하면서

차근차근 하나하나 써 내려가려고합니다.

웹에 관심있고 웹으로 일하시는분들

모두 같이 정보 공유해요 :)