Extjs案例 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
   <script type="text/javascript">   
      Ext.require(['*']);
      Ext.onReady(function(){
         // Store data
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });
          // Creation of grid store
         var gridStore = Ext.create('Ext.data.Store', {
            model  : 'StudentDataModel',
            data   : myData
         });
         // Creation of first grid
         var grid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
               plugins: {
                  ddGroup: 'GridExample',
                  ptype: 'gridviewdragdrop',
                  enableDrop: false
               }
            },
            enableDragDrop   : true,
            stripeRows       : true,
            width            : 300,
            margins          : '0 2 0 0',
            region           : 'west',
            title            : 'Student Data Grid',
            selModel         : Ext.create('Ext.selection.RowModel',{
               singleSelect : true
            }),
            store            : gridStore,
            columns          : 
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',   
                  id : 'name',    
                  flex:  1,         
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }]
         });
         // Creation of form panel
         var formPanel = Ext.create('Ext.form.Panel', {
            region     : 'center',
            title      : 'Generic Form Panel',
            bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
            labelWidth : 100,
            width      : 300,
            margins    : '0 0 0 3',
            items      : [{
               xtype : 'textfield',
               fieldLabel : 'Student Name',
               name       : 'name'
            },{
               xtype : 'textfield',
               fieldLabel : 'Age',
               name       : 'age'
            },{
               xtype : 'textfield',
               fieldLabel : 'Marks',
               name       : 'marks'
            }]
         });
         // Creation of display panel for showing both grid and form
         var displayPanel = Ext.create('Ext.Panel', {
            width    : 600,
            height   : 200,
            layout   : 'border',
            renderTo : 'panel',
            bodyPadding: '5',
            items    : [grid, formPanel],
            bbar    : [
               '->',
               {
               text    : 'Reset',
               handler : function() {
                  gridStore.loadData(myData);
                  formPanel.getForm().reset();
               }
            }]
         });

AخA
 
<!DOCTYPE html>
<html>
<head>
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
   <script type="text/javascript">   
      Ext.require(['*']);
      Ext.onReady(function(){
         // Store data
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });
          // Creation of grid store
         var gridStore = Ext.create('Ext.data.Store', {
            model  : 'StudentDataModel',
            data   : myData
         });
         // Creation of first grid
         var grid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
               plugins: {
                  ddGroup: 'GridExample',
                  ptype: 'gridviewdragdrop',
                  enableDrop: false
               }
            },
            enableDragDrop   : true,
            stripeRows       : true,
            width            : 300,
            margins          : '0 2 0 0',
            region           : 'west',
            title            : 'Student Data Grid',
            selModel         : Ext.create('Ext.selection.RowModel',{
               singleSelect : true
            }),