[extJs] 헤더(컬럼) 동적으로 추가하기

[.js][software] 2017. 9. 14. 09:50


뷰포트를 이용해야 하는듯.

그리드를 처음에 만들어서 뷰포트에 넣어서 나오게 만들고

버튼을 클릭하면 뷰포트에서 지운다음 그리드를 다시 만들어서

뷰포트에 넣는 구조.



 




<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(){


  columns = [
          {
              text: 'Name',
              width: 100,
              sortable: false,
              hideable: false,
              dataIndex: 'name'
          },
          {
              text: 'Email Address',
              width: 150,
              dataIndex: 'email',
              hidden: false
          },
          {
              text: 'Phone Number',
              flex: 1,
              dataIndex: 'phone' ,          
              editable: true
          } 
  ];


  Ext.define('User', {
      extend: 'Ext.data.Model',
      fields: columns
  });


  var userStore = Ext.create('Ext.data.Store', {
      model: 'User',
      data: [
         { name: 'Lisa', email: 'lisa@simpsons.com', phone: '100' , age: '50' },
         { name: 'Bart', email: 'bart@simpsons.com', phone: '110' , age: '20'},
         { name: 'Homer', email: 'homer@simpsons.com', phone: '31', age: '10' },
         { name: 'Marge', email: 'marge@simpsons.com', phone: '95', age: '30' }
      ]
  });


  gridConfig = {
      store: userStore,
      width: 400,
      height: 200,
      title: 'Application Users',
      editable : true,   
      columns :  Ext.Array.clone( columns )      
  };


  grid01 = Ext.create('Ext.grid.Panel',   gridConfig  ); 
  
  button1 = Ext.create('Ext.Button', {
      text: 'Click me',
      handler: function() {
     viewport.remove(grid01, true);      
     columns.push( 
          {
              text: 'age',
              flex: 1,
              dataIndex: 'age' ,
              editable: true
          }      
     );
     
     gridConfig.columns = columns;
     grid01 = Ext.create('Ext.grid.Panel',   gridConfig  ); 
     viewport.add(grid01);
      }
  });  


  var viewport = Ext.create('Ext.container.Viewport', {
      layout: 'border',
      items: [ 
        grid01
        , 
        button1
      ]
  });  


});




</script>
</body>
</html>

 

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

[realGrid] sort 기능 막기  (0) 2018.10.14
[realGrid] 기타  (0) 2018.09.14
[jqGrid] div를 이용한 퍼센테이지바 percentage bar  (0) 2017.09.11
[jqGrid] jqGrid 틀고정 Fixed frame  (0) 2017.09.11
[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
Posted by 혜화초보
,

[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 혜화초보
,

[extJs] simple grid (editable)

[.js][software] 2017. 9. 8. 13:52
 
extJs  simple  grid  수정가능





<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' >


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-1224' },
         { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
         { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
         { 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',
               editor: {
                xtype:'textfield',
                allowBlank:false
              },              
              editable: true
          }
      ],      
      plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
      ] 
  }); 
    
});




</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] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
[extJs] simple gird  (0) 2017.09.08
[extJs] 텍스트 필드에 값 붙여 넣으면 읽어서 치환.  (0) 2017.09.07
Posted by 혜화초보
,

[extJs] simple gird

[.js][software] 2017. 9. 8. 13:23
 
 
 






<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' >


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-1224' },
         { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
         { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
         { 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',
      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'
          }
      ]
  }); 
    
});

 

 

 

 

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

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

[extJs] 텍스트 필드에 값 붙여 넣으면 읽어서 치환.

[.js][software] 2017. 9. 7. 09:27

 

/*

텍스트 필드에 값을 붙여 넣은 경우 그 값에서 공백을

콤마로 치환하는 예제.

 

If you paste a value into a text field,

Example of replacing with a comma.

*/

 

 

<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' >

 

Ext.onReady(function(){

 

  Ext.create('Ext.form.Panel', {

      title: 'Contact Info',

      width: 300,

      bodyPadding: 10,

      renderTo: Ext.getBody(),

      items: [{

          xtype: 'textfield',

          name: 'name',

          fieldLabel: 'Name',

          allowBlank: false  // requires a non-empty value

          ,

          listeners: {

            paste: {

              element: 'inputEl',

              fn: function(event, inputEl) {

               setTimeout(function(){

                 var temp1 = ( inputEl.value  ).replace(/ /g,",");

                 inputEl.value = temp1;

               },0);

              }

            }

          }

      }, {

          xtype: 'textfield',

          name: 'email',

          fieldLabel: 'Email Address',

          vtype: 'email'  // requires value to be a valid email address format

      }]

  });

    

    

});

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

[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
[extJs] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
[extJs] simple grid (editable)  (0) 2017.09.08
[extJs] simple gird  (0) 2017.09.08
Posted by 혜화초보
,

티스토리툴바