EXTJS4.0.7开发积累
有从网络上搜索到的资源，也有自己开发中的总结，侵权告知删除！
| panel/form layout | 横向布局、纵向延伸 layout:{
} 纵向布局、横向延伸 layout: {
} Ext.apply布局不要执行多次，多次执行有问题 Ext.apply(me_select.up('panel'),{ }); |
| 数据库和java和hbm都是boolean类型 从页面上获得就变成了'true'或者'false' | console.info('db_tbl_created:'+button.up('window').down('#db_tbl_created').getValue()); if(button.up('window').down('#db_tbl_created').getValue()=='false'){ button.up('window').down('#db_tbl_created').setValue(true); console.info('db_tbl_created:'+button.up('window').down('#db_tbl_created').getValue()); } |
| tab+grid+columns:[] | tab中嵌套grid，但grid的columns信息只有在tab创建后才可以通过action获取，只能在grid的config定义里面把columns设置为空（columns:[]） 然后再afterrender事件中生成columns和store，执行如下：me.reconfigure(xTableStore,columnArray);xTableStore.load(); 在reconfigure命令前【不要执行任何的Ext.apply操作，否则tab会有问题】 |
| id与itemId | 控件的id和itemId不要都设置，否则当通过getComponent查找时会出现问题 |
| grid的dockedItems导致的style undefineed错误 | 第一次打开没有问题，显示正常，但关掉之后，再重新打开则报错：UncaughtTypeError: Cannot read property 'style' of undefined dockedItems的添加代码写在initComponent方法里的Ext.apply里面就会避免该问题（4.0.1版本有次问题，其他版本没有测试）。 如下： dockedItems:[ {
}, {
} ] 在initComponent中添加dockedItems的骨架，如上，然后再在afterrender中修改dockedItems的设置。为pagingtoolbar设置store或为toolbar添加item |
| 数据库默认值和java默认值问题 | 在数据库的表创建语句里面添加default设定，如下： alter table commoncols add columncol_type tinyint default 2; 这只对sql插入时生效，但java调用hibernate在数据库里面插入记录时没有效果。 java调用hibernate往数据库插入时使用如下方法： 在bo定义的时候赋值给特定属性，如下： private short col_type=2; 如此每次想数据库里面存值的时候，如果没有设定col_type就是默认为2 |
| 停止textfield的唯一性校验 | view.down('#user_def_name').clearListeners(); |
| 焦点问题 | 在window的最后添加：defaultFocus:'AuthGrpName' 有的时候执行afterrender后，上面的设置不行，就在afterrender里面执行如下：me.focus('AuthGrpName'); 注意AuthGrpName是itemId不是name |
| jdbcDAO.getMapList select * 后台遍历数据的比较好方法 | String sql="select * fromcommontable_1 where commontable_1_col_1='"+userName+"' and id notin(" +CommUtils.list_long_to_string(exclude_id_list) +")"; List xx=jdbcDAO.getMapList(sql); JSONArray user_list = JSONArray.fromObject(xx); if(user_list.size()>0){ ((JSONObject)user_list.get(0)).getLong("id") } |
| border布局如何动态替换其中一块 | 事实上extjs不支持border布局移除某一块的内容，用container的add/remove等方法是没有用 任何使用border布局的容器都必须有一个center区域，你不用指定center区域的高和宽，它会根据其他区域的占用情况自动剩余区域 当border布局的容器被渲染后，它的子组件将不能被增加和移除。想要移除以border布局的容器的子组件，必须在外面增加一层不以border布局的容器panel wrc =Ext.getCmp('west-region-container'); wrc.removeAll(); wrc.add(addedPanel); |
| grid checkbox | 创建一个selectionModel var checkBox = Ext.create('Ext.selection.CheckboxModel'); 在grid定义的时候，添加如下： selModel:checkBox 获取选中值参考如下（假设id是要获取到后台处理的值）： store的model里面要有id column要有id列的定义： { dataIndex:'id', hideable:false, hidden:true } 处理函数里面的代码： var record = button.up('grid').getSelectionModel().getSelection(); if(record.length==0){ Ext.Msg.show({ title:'提示',msg:'请先选择您要操作的行!',buttons: Ext.Msg.OK,icon: Ext.Msg.INFO });}else{ var ids = ""; for(var i = 0; i < record.length; i++){ ids += record[i].get("id");} console.info('ids:'+ids); } |
| DecimalFormat用法 | DecimalFormat 是 NumberFormat 的一个具体子类，用于格式化十进制数字。 DecimalFormat 包含一个模式 和一组符号
符号含义： 0 一个数字 # 一个数字，不包括 0 . 小数的分隔符的占位符 , 分组分隔符的占位符 ; 分隔格式。 =-缺省负数前缀。 % 乘以 100 和作为百分比显示 ? 乘以 1000 和作为千进制货币符显示；用货币符号代替；如果双写，用 国际货币符号代替。如果出现在一个模式中，用货币十进制分隔符代 替十进制分隔符。 X 前缀或后缀中使用的任何其它字符，用来引用前缀或后缀中的特殊字符。 例子： DecimalFormat df1 = newDecimalFormat("0.0"); DecimalFormat df2 = newDecimalFormat("#.#"); DecimalFormat df3 = newDecimalFormat("000.000"); DecimalFormat df4 = newDecimalFormat("###.###"); System.out.println(df1.format(12.34)); System.out.println(df2.format(12.34)); System.out.println(df3.format(12.34)); System.out.println(df4.format(12.34));
结果： 12.3 12.3 12.34 12.34 |
| mysql的decimail
beimi:decimal(20,2) | 1.首先，对于精度比较高的东西，比如money，我会用decimal类型，不会考虑float,double,因为他们容易产生误差，numeric和decimal同义，numeric将自动转成decimal。 DECIMAL从MySQL 5.1引入，列的声明语法是DECIMAL(M,D)。在MySQL 5.1中，参量的取值范围如下： ·M是数字的最大数（精度）。其范围为1～65（在较旧的MySQL版本中，允许的范围是1～254），M的默认值是10。 ·D是小数点右侧数字的数目（标度）。其范围是0～30，但不得超过M。 说明：float占4个字节，double占8个字节，decimail(M,D)占M+2个字节。 如DECIMAL(5,2) 的最大值为9 9 9 9 . 9 9，因为有7 个字节可用。 M 与D 对DECIMAL(M, D) 取值范围的影响 结论： 当数值在其取值范围之内，小数位多了，则直接截断小数位。 若数值在其取值范围之外，则用最大(小)值对其填充。 |
| grid的renderer问题
renderer里面有变量需要谨慎
所示案例是因为同一个表里面有两个日期 字段，并且两个日期字段的显示格式不一致 | 有column定义如下： var column={ header: eval(viewDataCols)[i].user_def_name, dataIndex: eval(viewDataCols)[i].db_col_name, flex:1, itemId: eval(viewDataCols)[i].db_col_name, renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ var me=this; console.info('date_time_format_str__in renderer:'+date_time_format_str); if(value!=null){ var kkk=value.time; var xx=new Date(kkk); var xxx=Ext.util.Format.date(xx,date_time_format_str); // var xxx=Ext.util.Format.date(xx, 'H:i:s'); return xxx; }else{ return ''; } }, }; 其中的date_time_format_str变量由外面的条件决定，column定义和条件判断之外是一个循环，date_time_format_str会有多个值，在这样的定义下 所有的column在显示后发现date_time_format_str均使用了循环最后得到的值。 解决办法尝试一：在column定义处添加date_time_format:date_time_format_str属性定义，在renderer里面通过this（整个页面控件的索引）向下down搜索获取 该变量，发现date_time_format_str还是均使用了循环最后得到的值，没有效果。 解决办法尝试二：添加beforerender监听事件，并在里面获取column定义里面的date_time_format:date_time_format_str属性值，每次循环都不一样，可以获取 正确值。取消掉renderer，添加beforerender，并在beforerender里面设置renderer，测试成功，如下： listeners:{ 'beforerender':function(){ console.info('before renderer:'+this.date_time_format); var www=this.date_time_format; var datetimerender=function(value){ console.info('date_time_format_str__in renderer:'+www);}; Ext.apply(this,{renderer:datetimerender}); } } beforerender里面的this就是column本身 |
| grid的autoScroll | 不设置grid的autoScroll:true就不能上下滚动噢 |
| json相关问题key定义问题 key本身就是变量 | 定义属性的方式有两种：一种是obj.tt，另外一种是obj[tt]。 第一种是不能为变量，第二种可以为变量. <script>
</script> |
| excel测试数据自动生成公式 | =TEXT(RANDBETWEEN("2015-6-1","2015-7-8")+RAND(),"yyyy/mm/ddhh:mm") =RANDBETWEEN(5,1000) |
| chart的保存 | {text: 'Save Chart', Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
} }); }} |
| readOnly使用注意 | 建议使用thiswindow.down('#display_content_tbl_id').setReadOnly(true); 不要使用thiswindow.down('#display_content_tbl_id').readOnly=true; 后者会出现界面显示错乱问题 |
| chart pie布局的父容器不要使用fit布局 | 父容器使用fit布局，pie的显示会出现错乱，避免方法：在chart部分不要设置width和height的值 |
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
