EXTJS4.0.7开发积累
有从网络上搜索到的资源,也有自己开发中的总结,侵权告知删除!
panel嵌套到tab | 嵌套到tab中的panel,如无必要尽量不要设置id/itemId之类的属性,特别是设置了itemId后会造成id重复的错误 // id:'usereditID', // itemId:'logicsysxpanel', |
[Ljava.lang.String解释 | [表示一维数组[[表示二维数组L表示对象 System.out.println(String[].class); [Ljava.lang.String; System.out.println(String.class); java.lang.String |
String.subString | Stringold_string="1#Logicsys_1_tbl_1"; Stringtmp=old_string.substring(0, old_string.indexOf('#')); System.out.println("returnValue.size:"+tmp); returnValue.size:1 |
grid选定某行 | grid.getSelectionModel().select(rowIndex); 其中,rowIndex是行号(在actioncolumn的处理函数里面添加,点击了action按钮后,就一道选中了该记录,标识所操作的记录) |
函数调用的scope问题 (外部函数可以直接调用this指代触发自己的控件本身) | Ext.define('DM.view.authorityGrp.AuthGrpAdd', {});中有如下按钮并绑定事件处理函数: { xtype:'button', text: 'add' ,handler:userListAddHandler ,margin: '0 2 0 0' } 其中,userListAddHandler是外部函数(在Ext.define('DM.view.authorityGrp.AuthGrpAdd', {})之外定义) function userListAddHandler(button){ var me=this; } 在这个函数中,可以直接调用this指代button本身 |
Form取值问题 | view.down('form').loadRecord(rec); console.info('is valueunique:'+view.down('#page_block_label').getValue()); 只有在form执行完loadRecord后,下面的console才能获得值的。在form里面的afterrender等事件中是取不到值的,因为那时还没有loadRecord。 |
Down使用注意 | win.parentwindow.down('#compts_id').getValue() 其中parentwindow是一个Ext.window.Window,里面嵌套了form,compts_id是form里面的textfield控件,可以从window直接down到compts_id而不必如下: Win.parentwindow.down(‘form’).down('#compts_id').getValue() |
Down使用注意 Combobox的update显示问题 | win.parentwindow.down('#compts_id').getValue() 其中parentwindow是一个Ext.window.Window,里面嵌套了form,compts_id是form里面的textfield控件,可以从window直接down到compts_id而不必如下: Win.parentwindow.down(‘form’).down('#compts_id').getValue() { xtype:'combobox', itemId: 'compts_allowBlank', fieldLabel:'输入值不可空', value:eval(this.parentwindow.down('#compts_allowBlank').getValue()), emptyText:'选择...', triggerAction:'all', allowBlank: false ,store: trueorfalse ,forceSelection: true ,editable: false ,queryMode: 'local' ,displayField: 'name' ,valueField: 'abbr' } 其中:this.parentwindow.down('#compts_allowBlank').getValue()是父亲窗口获得的值,console.info时也得到false,但不能正确显示在combobox中(为空,校验失败),添加eval后正常显示。 |
Form的子控件添加方法 | initComponent: function() { this.items = [ { xtype: 'form', plain: true, frame: true, border: 0, bodyPadding: 5, defaults: { layout: 'anchor', anchor: '100%', labelAlign:'right' }, } ]; this.on('afterrender',function(){ if(this.parentwindow.down('#compts_id').getValue()==1){ this.down('form').add( [ { xtype:'numberfield', fieldLabel:'输入最小长度', itemId:'compts_minLength', maxValue:36, minValue:1, allowBlank:false ,value:this.parentwindow.down('#compts_minLength').getValue() } ,{ xtype:'textfield', fieldLabel:'过短提示', itemId:'compts_minLengthText', allowBlank:false, value:this.parentwindow.down('#compts_minLengthText').getValue() } ] ); }else if(this.parentwindow.down('#compts_id').getValue()==2){ this.down('form').add( [ { xtype:'textfield', fieldLabel:'显示内容', itemId:'compts_value', allowBlank:false, value:this.parentwindow.down('#compts_value').getValue() } ] ); } }); this.callParent(arguments); } |
labelAlign | Fieldlabel对其方式,有top、left、right三种方式,left默认。 defaults: { layout: 'anchor', anchor: '100%', labelAlign:'right' }, 或者在form里面: fieldDefaults: { labelAlign: "right" }, |
Ext.window.Window的父window和子window之间的值传递方法 | Ext.widget('comptspopupcreate',{parentwindow:button.up('window')}); 其中'comptspopupcreate'是子windows,parentwindow是父window,如此就可以在子window中访问和修改父window的值了 |
hbox布局界面中,两个控件中间的空白地带总是比其他的宽,可以使用如下的方法去掉: 添加magin配置: | { xtype: 'fieldcontainer', fieldLabel: '是否唯一', itemId:'unique_set', margin: '0 0 0 0', layout: 'hbox', items: [ { xtype:”button”, text:’按钮’ } ] } |
hbox布局界面中,两个控件中间的空白地带总是比其他的宽,可以使用如下的方法去掉: 添加magin配置:margin: '0 0 0 0' Action返回Json中的list是完整的多字段对象,但在创建store时,可以只截取其中的一部分有用字段(比如例子中只截取了3个字段) | store: Ext.create('Ext.data.Store', { fields: ['id', 'user_def_name','widget_name'], autoLoad:true, proxy: { type: 'ajax', api: { read : 'get_west_region_menu.action' }, reader: { type: 'json', root: 'list' } } }) |
Calendar和Date的转化 | (1) Calendar转化为Date Calendarcal=Calendar.getInstance(); Datedate=cal.getTime();
(2) Date转化为Calendar Date date=newDate(); Calendarcal=Calendar.getInstance(); cal.setTime(date); |
New Date()到字符串的比较 | system.out.println((newDate()).toString()); Wed Sep 17 22:41:54 CST 2014
system.out.println((newDate()).toLocaleString()); 2014/9/17 22:42
system.out.println((newDate()).toLocaleString()); Sep 2014 14:44:24 GMT |
Mysql的tinyint类型存储 | 表有字段userType,类型tinyint,到了数据库里面存储为tinyint(4)。 |
Mysql的boolean类型存储 | 表有字段status,类型boolean,到了数据库里面存储为tinyint(1)。0代表false,1代表true。 数据库中查询的时候,可以使用如下: sb.append("select new map(l.id as id,l.logicSysName as logicSysName) from LogicSys l "); sb.append(" where l.status > 0"); sb.append(" order by l.logicSysName "); |
store的创建方法比较 【学习新的好方法,可以省掉很多臭汗】 | 方法一: Ext.Ajax.request({ url:'getAllLogicSysList.action', success:function(resp,opts) { var respText = Ext.JSON.decode(resp.responseText); var logicsysList=respText.list; var logic_sys_store_before_login = Ext.create('Ext.data.Store', { fields: [ {type: 'string', name: 'logicSysName'}, {type: 'long', name: 'id'} ] }); for(var i in logicsysList){ logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id}); console.info("logicSysName:"+logicsysList[i].logicSysName); console.info("id:"+logicsysList[i].id); } Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login); } }); 方法二: var logic_sys_store_before_login = Ext.create('Ext.data.Store', { fields: [ {type: 'string', name: 'logicSysName'}, {type: 'long', name: 'id'} ], proxy: { type: 'ajax', // url:'getAllLogicSysList.action', api: { read : 'getAllLogicSysList.action' }, reader: { type: 'json', root: 'list' } } }); Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login); logic_sys_store_before_login.load(); 其中方法二也可以用把: api: { read : 'getAllLogicSysList.action' }, 去掉,而采用: url:'getAllLogicSysList.action' 的写法; 不要store create的时候直接为store执行load方法,要不在页面上虽然显示了数据列表,但不能显示选中值。最好单独执行: logic_sys_store_before_login.load(); 方法三:(方法一、方法二都是在afterrender事件中执行的,方法三的创建方法和afterrender无关) initComponent: function() { Ext.apply(this, { items: this.createView() }); this.addEvents( 'feedselect' ); this.callParent(); }, createView: function(){ this.view = Ext.create('widget.dataview', { store: Ext.create('Ext.data.Store', { fields: ['id', 'user_def_name','widget_name'], autoLoad:true, proxy: { type: 'ajax', api: { read : 'get_west_region_menu.action' }, reader: { type: 'json', root: 'list' } } }), selModel: { mode: 'SINGLE', listeners: { scope: this, selectionchange: this.onSelectionChange } }, listeners: { scope: this, contextmenu: this.onContextMenu, // viewready: this.onViewReady }, trackOver: true, cls: 'feed-list', itemSelector: '.feed-list-item', overItemCls: 'feed-list-item-hover', tpl: '<tpl for="."><div class="feed-list-item">{user_def_name}</div></tpl>' }); return this.view; } 注意:在这个方法中,如果没有“autoLoad:true”,数据不会加载,有了才会自动加载。 |
Extjs4.0.7的checkbox bug | 保存的时候需要单独设置该值,否则后台得不到该值: var values = form.getValues(); record.set(values); record.set('status',form.getComponent('usernamecontainer').down('#statusCheckbox').getValue()); |
后台有5-8个字段,但我查询的时候只需要其中的2个字段:id、name,其他的不仅没有用也不想暴露出来。根据返回值,在前台组装成combobox的store | this.on('afterrender',function(){ var me=this; //获得逻辑系统列表 Ext.Ajax.request({ url:'getAllLogicSysList.action', success:function(resp,opts) { var respText = Ext.JSON.decode(resp.responseText); var logicsysList=respText.list; var logic_sys_store_before_login = Ext.create('Ext.data.Store', { fields: [ {type: 'string', name: 'logicSysName'}, {type: 'long', name: 'id'} ] }); // tbls_store.removeAll(); for(var i in logicsysList){ logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id}); console.info("logicSysName:"+logicsysList[i].logicSysName); console.info("id:"+logicsysList[i].id); } Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login); } }); }); 一、其中logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id});代码对应后台DAO的如下hql语句:select new map(l.id as id,l.logicSysName as logicSysName) from LogicSys l 二、其中logic_sys_store_before_login.add({logicSysName:logicsysList[i][1],id:logicsysList[i][0]});代码对应后台DAO的如下hql语句:select l.id,l.logicSysName from LogicSys l |