[.js][software]

[extJs] simple gird

혜화초보 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'
          }
      ]
  }); 
    
});