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）