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

include , 포함인지 여부

[.js] no category 2017. 9. 13. 15:48


어떤 변수에 "aaa" 라는 값이 포함 되어 있는지

아닌지를 찾을때 ..


방법


찾은게 .. include 인데..


이건 ..


익스플로러 12 이상에서만 가능하다고 함.


indexOf 로 찾을수 있습니다.~


아래 결과는 ddd 의 시작 위치를 리턴.


없는 경우 찾는 값이 없는 경우 -1 리턴.


익스 버전 상관 없이 가능한 함수.


 

<!DOCTYPE html>

<html>

<head>

</head>


<script language='javascript' >


function test(   ){


  console.log( '--- ');

  var a = 'sef ccc ddd  ddd ';

  console.log( ' --- ' + a.indexOf("ddd") );

}

 

test();


</script>

<body>


</body>

</html>



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

base html 왁구  (0) 2019.08.03
1초에 한번 함수 실행  (0) 2017.09.06
정수로 casting 예제  (0) 2017.09.06
Posted by 혜화초보
,

마우스 오버시 커서를 이미지로 변경

[.Html css] 2017. 9. 12. 13:46


/* cursor image change */

/* 커서를 특정한 이미지로 변경한다. */

/* Change the cursor to a specific image. */


 



<html>

<head>


<style type="text/css">

 <!--

 //-->

 </style>


</head>


<script  language="javascript"  >

</script>

    <body   >

        <div id="groundDiv"  

           style="position:relative; width:99%; height:99%; 

            border:1px solid black;cursor:url( './aaa3.png' ), pointer  ;">

        </div>

    </body>

</html>


'[.Html css] ' 카테고리의 다른 글

[bootstrap 4.0] tooltip hide  (0) 2021.07.13
Posted by 혜화초보
,

티스토리툴바