Ext.grid.GridPanel的MVC体现

最新推荐文章于 2018-12-19 15:30:00 发布

dingherry

最新推荐文章于 2018-12-19 15:30:00 发布

阅读量1.8k

点赞数

分类专栏： Extjs 文章标签： mvc header j2ee框架 extjs behavior interface

本文链接：https://blog.csdn.net/dingherry/article/details/6798778

版权

Extjs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ExtJs面向对象的特性，用于J2EE框架的UI层，我们常常将之归于界面展示层。

其实ExtJs的Ext.grid.GridPanel也是个MVC框架，它由四个必要的组成部分：
Store: The Model holding the data records (rows) new Ext.data.Store
Column model : Column makeup     new Ext.grid.ColumnModel
View : Encapsulates the user interface    viewConfig
selection model : Selection behavior    new Ext.grid.RowSelectionModel

var grid = new Ext.grid.GridPanel({
     store: new Ext.data.Store({
         autoDestroy: true,
         reader: reader,
         data: xg.dummyData
     }),
     colModel: new Ext.grid.ColumnModel({
         defaults: {
             width: 120,
             sortable: true
         },
         columns: [
             {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
             {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
             {header: 'Change', dataIndex: 'change'},
             {header: '% Change', dataIndex: 'pctChange'},
             // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
             {
                 header: 'Last Updated', width: 135, dataIndex: 'lastChange',
                 xtype: 'datecolumn', format: 'M d, Y'
             }
         ]
     }),
     viewConfig: {
         forceFit: true,

  //Return CSS class to apply to rows depending upon data values
         getRowClass: function(record, index) {
             var c = record.get('change');
             if (c < 0) {
                 return 'price-fall';
             } else if (c > 0) {
                 return 'price-rise';
             }
         }
     },
     sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
     width: 600,
     height: 300,
     frame: true,
     title: 'Framed with Row Selection and Horizontal Scrolling',
     iconCls: 'icon-grid'
});

http://hi.baidu.com/jsjok/blog/item/8f12611b3b0d685f42a9ad4b.html