也学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..偶尔兴起写一下---写就写拜,睡觉