Web应用开发（前端）—Ext Js的MVC（2）

之前，我们已经创建好了首页以及启动脚本LibraryApp.js，接下来就是绘制页面。页面的整体框架由Viewport进行渲染。

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('Library.view.LibraryView', {
    extend: 'Ext.container.Viewport',    
    layout: 'fit',
    border: false,
    requires: [
               'Library.view.main.Header',
               'Library.view.main.Content'
           ],
    initComponent: function() { 
    var me = this;
    Ext.apply(me, {
    items:[{
            xtype: 'panel',
                border: false,
                id    : 'viewport',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },

                items: [
                    Ext.create('Library.view.main.Header'),
                    Ext.create('Library.view.main.Content',{
                    showtype:'book'
                    })
                ]

    }]

    });
    me.callParent(arguments); 
    }

});

在Ext 中，View更多时候被看成为装载数据的模板。其根本构成就是layout以及component。

对于layout以及component，可以参考API，或者后续查看专题补充吧。。：）

在view中说几点我所遇到的问题：

1.样式：

Ext中的样式控制

2. 位置控制

对于Ext的位置控制最好的办法是去参考Ext 的API，那里有样例，只要把代码复制出来就可以了。不过我所纠结的是控件之间的空间排列。这就需要对控件的margin以及Padding进行设置了。

3.复杂样式

Ext把简单问题复杂化，当我们想做出一个

这样的表格的时候，也许我们只要在jsp中做一个循环就可以了。要想用Ext来完成这样的工作，那自然要去查看一下API，看看Ext提供了哪些功能能够帮助我们实现。

1. 用component中的tpl来定义每行的模板，

给出一个官方的例子：

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);

2. 在Grid中定义ViewConfig

viewConfig:{
                plugins: [{
                    pluginId: 'preview',
                    ptype: 'preview',
                    bodyField: 'description',
                    previewExpanded: true
                    }]
                }, 

这个就是我上文图像所对应的源代码，这个plugin的定义可以在官网API中找到。我也是对其做了一些修改来适应系统的业务需求。这里我贴上源代码以供参考：

/**
 * The Preview enables you to show a configurable preview of a record.
 * 
 * This plugin assumes that it has control over the features used for this
 * particular grid section and may conflict with other plugins.
 */
Ext.define('Library.plugins.PreviewPlugin', {
extend  : 'Ext.AbstractPlugin',
alias : 'plugin.preview',
requires : [ 'Ext.grid.feature.RowBody',
'Ext.grid.feature.RowWrap' ],
// private, css class to use to hide the body
hideBodyCls : 'x-grid-row-body-hidden',
/**
 * @cfg {String} bodyField Field to display in the preview.
 *      Must be a field within the Model definition that the
 *      store is using.
 */
bodyField : '',
/**
 * @cfg {Boolean} previewExpanded
 */
previewExpanded : true,
setCmp : function(grid) {
this.callParent(arguments);
var bodyField = this.bodyField, hideBodyCls = this.hideBodyCls, features = [{
ftype : 'rowbody',
getAdditionalData : function(data, idx,
record, orig, view) {
var getAdditionalData = Ext.grid.feature.RowBody.prototype.getAdditionalData, additionalData = {
rowBody : '<p class="desc">'+data[bodyField]+'</p><a href="www.baidu.com">order</a>',
rowBodyCls : grid.previewExpanded ? ''
: hideBodyCls
};
if (getAdditionalData) {
Ext.apply(additionalData,
getAdditionalData.apply(
this, arguments));
}
return additionalData;
}
}, {
ftype : 'rowwrap'
} ];
grid.previewExpanded = this.previewExpanded;
if (!grid.features) {
grid.features = [];
}
grid.features = features.concat(grid.features);
},
/**
 * Toggle between the preview being expanded/hidden
 * 
 * @param {Boolean}
 *            expanded Pass true to expand the record and
 *            false to not show the preview.
 */
toggleExpanded : function(expanded) {
var view = this.getCmp();
this.previewExpanded = view.previewExpanded = expanded;
view.refresh();
}
});

系列链接： Web应用开发（前端）—Ext Js的MVC（3）