使用ExtJS三个月小结--开发小白_extjs还有人用吗?-优快云博客

作者分享了使用ExtJS开发3个月的经验，从基础概念到实际应用，包括MVC模式、组件使用、模型、控制器及异步加载JS文件等关键点。介绍了如何通过ExtJS快速实现用户界面的增删改查操作，以及在团队开发中的实践技巧。

使用ExtJS开发3个月有余,从最开始的各种找奶水到现在cv狂魔(ctrl C ctrl V).

使用ExtJS 开发真心很快,用户操作无非增删改查,使用ExtJS开发过程中又基本不用考虑界面,处理好一点点逻辑和数据就好了.

第一次写blog 一来是理理ExtJS 二来因为之前都是找奶水只知道索取毕竟不是好的但愿我写的会都某些人有用吧 .

(下面正文了, 有错误请随意技术喷,,我是小白只有一点点java 的基础. 这是我做的第一个项目 );

我们使用的是4.2.1 的版本主要看中的是mvc模式和它丰富的组件.

一. 先说说mvc 模式(重用职能分离维护方便)

注: (这是在网上找的图片, 额应该不会侵权吧 ...)

这样的结构超清晰, 不太好的就是文件的命名.

我在项目里的文件命名,主视图和控制的器的名字是完全一模一样的.维护起来更方便, 团队开发,队友维护你的模块也更加方便.还有一个更重要的就是异步加载js文件的问题!

(一个项目那么多js文件不可能第一次就全部加载出来,别人在项目里怎么做到的我不太清楚 ,我使用的是 Ext.require(很简单后面再讲) )

model 模型层如果懂点java 的话他就是一个类

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int', convert: null},
        {name: 'phone', type: 'string'},
        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
    ],

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " The Barbarian";

        this.set('name', newName);
    }
});

controller 控制器里面主要用来处理业务逻辑

Ext.define('XX.controller.AppMain', {
 extend: 'Ext.app.Controller',
 views: [],控制的视图
stores: [],控制是内存数据
 refs: [{
		 ref:'引用名',
		 selector:'选择器'
	 }],引用,会自动生成get引用名()方法,方便查找视图
 init: function (app) {
	 this.control({
	 '选择器': {
		 事件:方法
	 }
 });
方法:function(){};
});