也学extjs 1

0.看着一堆堆的js代码，真心头疼。。一直做想做后台，忽略前台由另一个同事全权负责，发觉三个和尚没水喝----需求不定时，团队合作效率太差

目标：尽快照着做几个通用画面：

单表查询，增删改

主子表查询，上下结构，上下都是grid,上下联动

主子表查询，左右结构，左边树，右边grid.树节点点击时，重新查询

1.Extjs。。前台的mvc。。

jsp/html/aspx页面 引用js-->

Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', 'js/ux'); 
Ext.application({ 
    name: 'demo', 
    appFolder: 'js',
    autoCreateViewport:false,
    controllers:['demo1'],
    launch: function() {
		var o=this.getController("demo1");
		o.createViewPort();
	} 
}); 

 其中，setPath设置Ext.ux路径；；

name设置项目名，则以后的id，在mvc前默认都加上该名称，如Ext.define('demo.controller.de.mo.demo1'----);;

appFolder设置对应的mvc根目录【相对项目根路径】，不写，则以当前目录为根目录；；

controllers:指定包含的controller,

launch：事件，在初始化时调用。如示例，先获取controller:demo1对象，然后调用该对象的createViewPort方法。controller对象js文件位于controller文件夹下。demo1.js

Ext.define('demo.controller.demo1',{ 
    extend: 'Ext.app.Controller', 
    lang:{},
    createViewPort:function(){
        var v=Ext.create("demo.view.demo1");
    	this.dorender(v);
    }
})

 其中如demo.controller.demo1对应controller/demo1.js...如demo.controller.de.mo.demo1对应controller/de/mo/demo1.js..

代码中，createViewPort方法，创建一个view：demo1对象.并dorender.

Ext.define('demo.view.demo1', {
    extend: 'Ext.container.Viewport',
    autoShow:true,
    layout: {
        type: 'border'
    },
    title:'用户登录',
    iconCls:'login_user',
    id:'loginpanel',
    autoScroll:true,
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [
                      {
                        xtype: 'textfield',
                        name: 'username',
                        emptyText: '账号',
                        labelAlign: 'right',
                        allowBlank:false,
                        regexText:'只能为2到10位的大小写字母。',
                        blankText : '该字段不允许为空'
                      }         
            ]
        });
        me.callParent(arguments);
    }
});

 view文件位置在view下，同controller..extend 继承自Viewport.;;

..通常，在view中会用到store.如var userStore=Ext.create("demo.store.de.mo.demo02");然后可使用对象store,类似数据源（前台的Datatable）..比如将它设置到grid的store属性中，完成绑定。。

    items: [
                {
                    xtype: 'gridpanel',
                    title: '用户列表',
                    columnLines: true,
                    store:userStore,
                    region: 'center',
                    stateful: true,
                    columns: [{
                        xtype: 'rownumberer'
                    },
                        {
                            xtype: 'gridcolumn',
                            align: 'center',
                            dataIndex: 'userName',
                            text: '用户名'
                        },
                        {
                            xtype: 'gridcolumn',
                            align: 'center',
                            dataIndex: 'realName',
                            text: '用户姓名'
                        },
                     ],
                    viewConfig: {
	                	stripeRows: true,
	                    enableTextSelection: true
                    },
                    dockedItems: [
                    {
                    	xtype: 'pagingtoolbar',
                    	width: 360,
                    	displayInfo: true,
                    	store:store,
                    	dock: 'bottom'
                    }
                    ]

 .store的定义。类似如下.继承自Ext.data.Store.

Ext.define('demo.store.de.mo.demo1', {
    extend: 'Ext.data.Store',
    model: 'demo.store.de.mo.demo1',
    autoLoad: false,
    proxy: {
		type: 'ajax',
		url: demo.getUser.action,
		reader: {
			type: 'json',
			root: 'records',
			totalProperty: 'totalcount'
		}
	}
});
 

 model表示使用的模型，类似列结构。。。，autoLoad表示，是否自动加载，proxy表示以ajax的方式，调用demo.getUser.action.返回的值类型为json,内容为records表示的值。。。其中model 的定义如下

Ext.define(‘demo.de.mo.demo1', {
    extend: 'Ext.data.Model',
    fields: ['appName','deptEname','deptCname','parentDeptId','levelId','contactUser','contactTel','contactEmail','common1','common2']
});

 ....至此，就是mvc.....m对于model,v对应view，c对应controller。数据可存储在store内，store使用model..view中定义如按钮，grid，输入框等， controller内定义事件，单击，双击等等。。。

2.。。extjs 是使用javascript 结合css，操作html表示样式。。属于浏览器级别的应用程序，当与服务器交互时，使用ajax调用 以json字符串方式交互。。

要做前台，必须先了解前台交互方式。。

当用户浏览器输入http://www.abc.com：8080/abc.html 时，会先找到服务器abc.com。找到8080端口，默认的80不需要输入，找到abc.html。。abc.html内有类似<script type="text/javascript" src="ext-all.js"></script>，则服务器会在返回abc.html相应时，同时返回ext-all.js，也即在浏览器端下载ext-all.js，同理自己写的js一样道理，如果<script type="text/javascript" src="app/demo1.js"></script>,则下载app/demo1.js，如果demo1.js如上所示，会在客户端launch时，自动下载需要的controller--view--store-model--.浏览器会执行js内的代码，launch-controller-view,在view中需要stroe时，store会调用里面的ajax后台请求。。。至到不需要掉用后台时，前台展现。。。当用户点击按钮时，执行js，如需要会同样循环上面的过程。。。。

3.。。。restfull,如博客地址http://www.cnblogs.com/9421/admin/EditArticles.aspx?opt=1  找到www.cnblogs.com 服务器，并不是说服务器上，刚好有9421/admin/EditArticles.aspx 的页面，这只是一个标示。。类似在后台定义一种规则，如 有一个EditAticles.aspx页面，当9421在后台管理时调用.则请求为9421/admin/EditArticles.aspx，如果是siper 调用则为siper/admin/EditArticles.aspx，如果是在前台管理时调用为siper/front/EditArticles.aspx...

4...因为浏览器自身为了速度，会有缓存管理器，以免同样的一个js，每次都下载，这也导致在开发时，常需要手动清空内存。。。

5.。。学习好extjs。有点类似学习一门新语言，新的空间库一样。。就像学习devxpress控件的使用一样，并不是说学习devxpress控件使用就必须精通C#,熟悉dev控件必然精通C#....extjs 与javascript同样道理。。。

6.。据说extjs太慢，做门户 可能不适合，，前台一个html页面，其他全部是extjs..不知道有多少项目这样用。。。存在即合理吧--随便啦。。先看看再说喽。。。

7.。 控件很多，事件很多，奇怪的需要也很多。当常用的并不多。。可以参考C#控件库，依次学习下：textbox,combox,datetime,grid,tree,panel,splidercontainer...

8..偶尔兴起写一下---写就写拜，睡觉

转载于:https://www.cnblogs.com/9421/articles/3209641.html