初识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的页面进去，也并不困难。学会了这些上手开发是没问题的。