您的位置：首页 > Web前端 > JavaScript

EXTJS4.0.7开发积累（4）

2016-07-20 22:23 405 查看
EXTJS4.0.7开发积累

有从网络上搜索到的资源，也有自己开发中的总结，侵权告知删除！

panel/form layout

横向布局、纵向延伸

layout:{

 type:'hbox',

 align:'stretch'

}

纵向布局、横向延伸

layout: {

 type:'vbox',

 align:'stretch'

}

Ext.apply布局不要执行多次，多次执行有问题

Ext.apply(me_select.up('panel'),{

 layout:{

 type:'hbox',

 align:'stretch'

 }

 layout: {

 type:'vbox',

 align:'stretch'

 },

});
数据库和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:[

    {

     xtype : 'pagingtoolbar',

     itemId:'bottomDockedItem',

     dock : 'bottom'

    },

    {

     xtype : 'toolbar',

     dock : 'top',

     itemId : 'topDockedItem'

    }

]

在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

         });

         return;
       }else{

        var ids = "";

              for(var i = 0; i < record.length; i++){
                 ids += record[i].get("id");

                 if(i<record.length-1){

                     ids = ids + ",";

                 }
              }

          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);

                                  if(value!=null){

                                                var kkk=value.time;

                                                var xx=new Date(kkk);

                                                var xxx=Ext.util.Format.date(xx,www);

//                                               var xxx=Ext.util.Format.date(xx, 'H:i:s');

                                                return xxx;

                                  }else{

                                          return '';

                                  }
                                  };

                                  Ext.apply(this,{renderer:datetimerender});

          }

}

beforerender里面的this就是column本身
grid的autoScroll不设置grid的autoScroll:true就不能上下滚动噢
json相关问题key定义问题

key本身就是变量

定义属性的方式有两种：一种是obj.tt，另外一种是obj[tt]。

第一种是不能为变量，第二种可以为变量.

<script>

    var tt="192.168.0.1"

    var t1="127.0.0.1"

    var str={};

    str[tt] = [{"key1":"张三"}];

    str[t1] = [{"key1":"李四"}];

    var data=JSON.stringify(str) 

   console.log(data);//{"192.168.0.1":[{"key1":"张三"}],"127.0.0.1":[{"key1":"李四"}]}

</script>

excel测试数据自动生成公式

=TEXT(RANDBETWEEN("2015-6-1","2015-7-8")+RAND(),"yyyy/mm/ddhh:mm")

 =RANDBETWEEN(5,1000)
chart的保存

{

text: 'Save Chart',

handler: function() {

Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?',function(choice){

if(choice == 'yes'){

chart.save({

type: 'image/png'

});

}

});

}
}
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的值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  extjs4 开发积累
相关文章推荐
新的分享
章节导航