[extJs] Mouse down the cell value and put it in the mouse-up cell

[.js][software] 2017. 9. 8. 15:52

 

 

 



/*  Mouse down the cell value and put it in the mouse-up cell */
/*
그리드에서 마우스다운한 셀 값 가져다(드레그 해서) 마우스업한 셀에 넣기 */



<html>
<head>
</head>
<link rel="stylesheet" type="text/css" charset="UTF-8" href="./theme-gray-all.css" />


<style type="text/css">
</style>


<script type="text/javascript" charset="UTF-8" src="./ext-all.js"></script>


<body>


<script language='javascript' >


var val_click;


Ext.onReady(function(){


  Ext.define('User', {
      extend: 'Ext.data.Model',
      fields: [ 'name', 'email', 'phone' ]
  });


  var userStore = Ext.create('Ext.data.Store', {
      model: 'User',
      data: [
         { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1221' },
         { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1232' },
         { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1243' },
         { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
      ]
  });


  Ext.create('Ext.grid.Panel', {
      renderTo: document.body,
      store: userStore,
      width: 400,
      height: 200,
      title: 'Application Users',
      editable : true, 
      columns: [
          {
              text: 'Name',
              width: 100,
              sortable: false,
              hideable: false,
              dataIndex: 'name'
          },
          {
              text: 'Email Address',
              width: 150,
              dataIndex: 'email',
              hidden: true
          },
          {
              text: 'Phone Number',
              flex: 1,
              dataIndex: 'phone' ,          
              editable: true
          }
      ] ,
      listeners: {
   'cellmousedown': function(iView, iCellEl, iColIdx, iStore, 
                                         iRowEl, iRowIdx, iEvent) {
           var rec = this.getStore().getAt(iRowIdx);
           var val2 = this.columns[iColIdx].dataIndex;
           val_click =  rec.get(  val2  );
           console.log(' value :: ' + val_click );
   },
   'cellmouseup': function(iView, iCellEl, iColIdx, iStore, 
                                      iRowEl, iRowIdx, iEvent) {
           var rec = this.getStore().getAt(iRowIdx);
           var val2 = this.columns[iColIdx].dataIndex;        
            rec.set(  val2  , val_click   );
   }
      }      
  }); 
});




</script>
<title>Simple Grid Sample for ExtJs</title>
</body>
</html>




 

 

'[.js][software]' 카테고리의 다른 글

[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
[extJs] simple grid (editable)  (0) 2017.09.08
[extJs] simple gird  (0) 2017.09.08
[extJs] 텍스트 필드에 값 붙여 넣으면 읽어서 치환.  (0) 2017.09.07
Posted by 혜화초보
,

onClick onFocus eventListener

[.js] 이벤트 2017. 9. 8. 14:47



 


<html>

<head>

</head>


<script  language="javascript"  >


function init(){


  var hoy1  = document.getElementById('hoy');


  //인풋박스안에 클릭을 했다가 다른곳 클릭을 해야

  //실행되는 이벤트 리스너.

  // An event listener that is executed after 

  // clicking in the input box and clicking elsewhere.  

  hoy1.addEventListener("blur", func1 , false);

  

  

  //포커스만 되도 실행되는 리스너

  //A listener that will be executed even if the focus is reached

  hoy1.addEventListener("focus", func2 , false);


}



function func1(){  

  console.log( ' hoy 1');

}


function func2(){  

  console.log( ' hoy 2');

}


</script>

    <body  onload="init();" >

        <input type='text'  size='20'    id='hoy'   >

    </body>

</html>


'[.js] 이벤트' 카테고리의 다른 글

붙여넣기 이벤트 처리 ctrl+v  (0) 2017.09.06
div 에다가 클릭 이벤트 걸기  (0) 2017.09.06
Posted by 혜화초보
,

클릭 드레그 하면 따라다니는 div

[.js] div 의 이동 2017. 9. 7. 15:04

 

 




<html>
<head>
</head>


<script  language="javascript"  >


 /*Click and drag to follow the div */


 var div_a1;


 function init(){
   div_a1 = document.getElementById('a1');
   var groundDiv = document.getElementById('groundDiv');
   groundDiv.addEventListener('mousedown', mouseDown);
   groundDiv.addEventListener('mousemove', mouseMove);
   groundDiv.addEventListener('mouseup', mouseUp);
 }


 var isClick = false; 
 function mouseDown(e){
   isClick = true;
 }
 
 function mouseMove(e){
   if( isClick == true ){
     div_a1.style.left = e.offsetX - 20 + 'px';
     div_a1.style.top = e.offsetY - 20 + 'px';     
   }
 }
 
 function mouseUp(e){
   isClick = false;
 }


</script>
    <body  onload="init();" >
        <div id="groundDiv"  style="position:relative; width:99%; height:99%; border:0x solid black;"></div>
        <div id='a1'  style="position:absolute; width:3px; height:3px; border:2px solid black;top:2px;left:3px  " ></div>
    </body>
</html>

 

 

'[.js] div 의 이동' 카테고리의 다른 글

div 회전  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

붙여넣기 이벤트 처리 ctrl+v

[.js] 이벤트 2017. 9. 6. 17:08

/*

paste event

*/



<html>

<head>


<style type="text/css">

 <!--

  #base1 {

  background-color: #F3F2F6;

  width: 10px;

  height: 10px;

  position:absolute;

  top: 200px;

  }

 //-->

 </style>


</head>


<script  language="javascript"  >

 /*

 */

 var ppp = 0;


 function init(){

   var groundDiv = document.getElementById('c2');

   groundDiv.addEventListener("paste", handler , false);   // all browsers and IE9+

   //groundDiv.attachEvent ("onpaste", handler);  // IE<9

 }

 

 function handler(){

    setTimeout(function(){

       var groundDiv = document.getElementById('c2').value;

       console.log('value:: ' + groundDiv );

    }, 0); //or 4

 }


</script>

    <body  onload="init();"   >

        <div id='base1' >

          <input type='text'  size='20'  name='c1' id='c2' >

        </div>

    </body>

</html>

'[.js] 이벤트' 카테고리의 다른 글

onClick onFocus eventListener  (0) 2017.09.08
div 에다가 클릭 이벤트 걸기  (0) 2017.09.06
Posted by 혜화초보
,

div 에다가 클릭 이벤트 걸기

[.js] 이벤트 2017. 9. 6. 17:04


 




/*

설명 :  화면을 열고 click 클릭하면 이벤트가 등록되고

        a1 의 div 를 클릭하면 hello 콘솔창에 찍힘.


재밌는건 click 여러번 클릭하면 리스너도 여러번 등록되서

hello도 여러번 출력됨.

*/


<html>

<head>

</head>

<script  language="javascript"  >


function exe(){


  var div1 = document.getElementById("a1");

  div1.addEventListener('click', function (event) {

    console.log(' hello ~ ');   

  });

}




</script>

    <body  >

        <div  id='a1'  style="  height:80px ; padding-top:200px ;

            background-color: lightblue;

            padding-left:200px "  >

          <a href="javascript:exe();"  >  click  </a>        

        </div>

        

 

    </body>

</html>


'[.js] 이벤트' 카테고리의 다른 글

onClick onFocus eventListener  (0) 2017.09.08
붙여넣기 이벤트 처리 ctrl+v  (0) 2017.09.06
Posted by 혜화초보
,

티스토리툴바