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