初识Ext——Ext快速上手指南

官方的介绍就省略了

自身感触

• 当我在刚开始接触ext的时候还是很懵的，可是逐渐的发现了它的强大，刚开始还买了一本书本想一点一点看看，可是效率太低，还有关于MVC，MVVM框架结构的介绍，实在是学的太慢。
• 于是就发明了一种快速学会ext的方法，三天即可上手，当然也要有一定的基础。
• 因为前端框架目的还是做前端的，前端无非就是画页面，和后台交互，所以画页面主要学习两个部分：布局和组件；交互也是主学两个部分：代理和AJAX请求。下面一一做下说明.

页面——布局

Ext提供的布局形式有很多，主要说两种布局形式
1.Border布局

2.纵横布局（Hbox和Vbox布局）

我更喜欢的是这种纵横布局的形式，如果单独使用hbox或vbox都不足以成为一个非常强大的布局形式，但是如果他们配合起来，画出整个页面是没有问题的。
注：这里所说的画页面是画出整个页面的轮廓。使用的是Ext的container(容器)或panel(面板)

页面——组件

既然整个页面的轮廓都出来了，那么再在每个小页面上添加内容岂不是很轻松了！
本质上讲container(容器)或panel(面板)也是组件，不过他们比较特殊即可以存放其他的组件如：button、checkbox、textfield、textarea、combobox等等
所以这里说的组件是后者，他们存在于面板之上，container或panel通过items属性将他们包括其中。
例：

var opBtnRightPanel = Ext.widget('panel',{
			itemId : 'opBtnRightPanel',
			border : false,
			flex : 1,
			width : '100%',
			layout : {
				type : 'hbox',
				pack : 'end',
				align : 'middle'
			},
			items : [ {
				xtype : 'button',
				text : 'textName',
				margin : "5%"
			}, {
				xtype : 'button',
				text : 'textName',
				margin : "5%"
			}, {
				itemId : 'saveBtn',
				xtype : 'button',
				text : 'textName',
				margin : "5%"
			} ],
		});

写成这种配置的形式还是很方便的，ext会自己生成一系列的html代码。

交互——代理

ext也是采用的是MVVM的框架设计，但是我用着没感觉出有啥区别，可能是境界还没有达到。
总之要有一个理念：视图与数据分离。
html+js+css其实已经可以做出来动态的前端页面了，但是还缺少灵魂的一环就是data，数据从哪里来？可以写死在前端，可以写在后端。从后端要取出来数据后显示在前端，这就有一个头疼的问题了：如何把这些拿到前端来的数据展示出来？ext提供了store属性就很好的处理了这个问题，当store更新的时候视图也随之而更新。
例：

{
				itemId : 'combo',
				xtype : 'combobox',
				fieldLabel : '项目',
				autoLoad:true,
				store : {
					fields : [ 'itemid', 'itemdesc','fieldsetid' ],
					proxy : {
//						extraParams :{
//							fieldsetid:'K01',
//						},
						filterParam:'test',
						reader : {
							type : 'json',
							root : 'fieldList'
						}
					}
				},
				emptyText : '请选择项目',
				displayField : 'itemdesc',
				valueField : 'itemid',
				name : 'itemid',
				editable : false
			}

combobox是个下拉选择框，选择框的数据是从后端获取而来，这里就采用了代理的方式获取的，当然这个代理我没有给全（涉及公司架构），可以自己去查一下api来使用，此处只介绍一种形式。

交互——AJAX请求

这也是另外一种请求方式，相对于代理更加灵活，也更 常用
例：

 Ext.Ajax.request({
     url: 'ajax_demo/sample.json',

     success: function(response, opts) {
         var obj = Ext.decode(response.responseText);
         console.dir(obj);
     },

     failure: function(response, opts) {
         console.log('server-side failure with status code ' + response.status);
     }
 });

剩下的就要慢慢的学习和进一步的研究了，其实还忽略了路由选择的部分，如何加载Ext的页面进去，也并不困难。学会了这些上手开发是没问题的。