ExtJS 6 gridPanel绘制表格并填充数据的例子-阿里云开发者社区

开发者社区> pandamonica> 正文

ExtJS 6 gridPanel绘制表格并填充数据的例子

简介: Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:View + Store + Model使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI View部分的代码 Ext.
+关注继续查看

Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:
View + Store + Model
使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI

View部分的代码

Ext.define('RUKU.view.hr.HRUserList', {
    extend: 'Ext.grid.Panel',
    xtype: 'hruserlist',
    
    requires:[
        'RUKU.store.hr.HRUserListStore',
        'RUKU.model.hr.HRUserListModel'
    ],
    
    //为View关联上Store
    store: {
         type:'huls'
    },
     
    initComponent:function(){
    
        var me = this;
        me.columns = [
           {text:'胸卡号', dataIndex:'pernr',flex:1},
           {text:'姓名', dataIndex:'ename',flex:1},
           {text:'状态', dataIndex:'pstate',flex:1}
        ];
        
        me.tbar = {
           xtype : "pagingtoolbar", 
           pageSize : 20,
           displayInfo: true
        };
    
        me.callParent(arguments);

    }
    
});

Store部分的代码

Ext.define('RUKU.store.hr.HRUserListStore', {
    extend: 'Ext.data.Store',
    alias: 'store.huls',
    
    //为Store关联上Model
    model: "RUKU.model.hr.HRUserListModel",
    
    proxy: {
            type: 'ajax',
            url: 'hr/userlist.html',
            reader: {
                    type: 'json',
                    rootProperty: 'data'
            }
    },
     
    autoLoad: true
        
});

Model部分的代码:

Ext.define('RUKU.model.hr.HRUserListModel', {
    extend: 'Ext.data.Model',
    
    fields: [
        { name: "pernr" },
        { name: "ename" },
        { name: "pstate"}
    ]

});

上述三部分协作的效果是这样的:
_

就这样

我们先用文字描述一下上述例子,然后上调试信息,看得更清楚

这个例子已经简化到了极点:View Store Model
哪怕用MVC的代码分割方法,也只有M和V,连controller都没有,更不要说ExtJS6 引入的ViewModel了。

Model,也就是Ext.data.Model 仅仅描述 数据的格式。记住只是描述,它并不存储数据,也不负责任何动作。只是描述。

Store,是数据存放的容器。既然是存放,那么首先要获取数据,然后才能存放在Store中。Store中配置的proxy就是获取数据的代码。最关键的是,在Store中配置了 autoLoad: true,这样就一上来就不需要任何动作,就触发了load()行为。

View中直接配置了Store,store直接为grid的colum填充数据了。
下面我们改一下代码,目的是可以利用console在浏览器上显示调试的信息,执行效果如下
_

我们去掉了store文件,改为,为View添加一个controller
在controller中创建一个store,然后执行load()方法,然后在callback方法中,显示console的信息:

代码如下:

View部分的代码

Ext.define('RUKU.view.hr.HRUserList', {
    extend: 'Ext.grid.Panel',
    xtype: 'hruserlist',
    
    requires:[
        'RUKU.store.hr.HRUserListStore',
        'RUKU.controller.hr.testController',
        'RUKU.model.hr.HRUserListModel'
    ],
    //为View配置controller
    controller:'testc',
    //为View屏蔽Store,让controller调用store
    /*     
    store: {
         type:'huls'
    },
      */
    initComponent:function(){
    
        var me = this;
        me.columns = [
           {text:'胸卡号', dataIndex:'pernr',flex:1},
           {text:'姓名', dataIndex:'ename',flex:1},
           {text:'状态', dataIndex:'pstate',flex:1}
        ];
        
        me.tbar = {
           xtype : "pagingtoolbar", 
           pageSize : 20,
           displayInfo: true
        };
    
        me.callParent(arguments);

    }
    
});

Controller部分的代码:

Ext.define('RUKU.controller.hr.testController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.testc',
    
    init: function(){
        
        var me = this;

        var store = Ext.create('Ext.data.Store', {
               autoLoad: true,
               model: "RUKU.model.hr.HRUserListModel",
               proxy: {
                     type: 'ajax',
                     url: 'hr/userlist.html',
                     reader: {
                           type: 'json',
                           rootProperty: 'data'
                     }
               }
        });
        store.load({
        
              callback: function(records, operation, success) {
                   
                  //alert(success);//显示success:   true or false
                  console.log(records);
                  //alert("类型是:"+typeof(store.getData()));  //object,  这个方法没什么内涵
                  //alert("记录数 :"+store.getCount());        //内涵也不深刻
                  //alert("autoLoad : "+store.getAutoLoad());   //是否自动load,如果是就直接读数据
                   
                  
                  //下面内容是Store中的数据,可以变成字符串显示
                  //正确的说,是store.load()方法返回值的分析
                  var vJon = Ext.encode(records[3]['data']);
                  alert("data : ---" + vJon);                         
                  
                  //var vJon2 = Ext.encode(records[3]['id']);
                  //alert("id : ---" + vJon2);
                  
                  //循环读数据Store
                  /*                   
                  for(i in records[3]['data']){
                     alert(i);
                     var vJon = Ext.encode(records[3]['data']);
                     alert(vJon);
                  }
                  */
                  
              },
              scope: this
        });
        
    }
        
});

Model部分的代码没有发生变化,就不列举了。
上述代码中,重要的是使用了store.load()方法返回值中的数据,把这些数据显示到console中,那么我们就可以利用Chrome浏览器进行调试了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原来MaxCompute还能这么玩系列(1)—— 通过Apache Zeppelin 快速实现数据可视化
通过简单的几步配置,教你如何快速实现MaxCompute的数据可视化
9872 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1082 0
VB.NET版机房收费系统---导出Excel表格
       datagridview,翻译成中文的意思是数据表格显示,使用DataGridView控件,可以显示和编辑来自不同类型的数据源的表格,将数据绑定到DataGridView控件非常简单和直观,大多数情况下,只需要设置DataSource属性即可,在绑定到包含多个列表或表的数据库源时,只需将DataMember属性设置为绑定的列表或表的字符串即可。
1233 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
859 0
SQL Server 2005 系统数据介绍:dm_exec_connections
原文:SQL Server 2005 系统数据介绍:dm_exec_connections转载:http://msdn.microsoft.com/zh-cn/library/ms181509(SQL.90).aspx   sys.dm_exec_connections、sys.dm_exec_sessions 和 sys.dm_exec_requests 动态管理视图映射到sys.sysprocesses 系统表。
1658 0
+关注
159
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载