EXTJS4.0.7开发积累（5）

最新推荐文章于 2016-07-21 00:07:25 发布

genelintao

最新推荐文章于 2016-07-21 00:07:25 发布

阅读量436

点赞数

文章标签： extjs4 开发积累

本文链接：https://blog.csdn.net/ljumping8848/article/details/51973924

版权

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

chart label旋转

label: {

rotate: {

degrees: 315

}

JS中，换行符不是\n,和java有差别

this.setTitle('X:'+storeItem.get('日期')

+'<br/>总值:'+total

+'<br/>单项['+item.storeField+']:'+storeItem.get(item.storeField)

+'<br/>占比:'+Math.round(storeItem.get(item.storeField)/total*100)+'%'

);

chart area图表注意

area图表本身有累加功能，不要自己设定minmum和maxmum，交给控件自己计算，否则图例的数值显示有问题

grid中true/false字段显示

{

xtype: 'booleancolumn',

text: '启用',

trueText: '是',

falseText: '否',

dataIndex: 'status',

width:50

}

grid

select记录

deselectAll记录

me.up('grid').getSelectionModel().deselectAll();

st.each(function(item, index, count) {

if(name==item.get('name')){

has=true;

me.up('grid').getSelectionModel().select(index);

}

});

checkbox空值不提交问题

checkboxgroup空值不提交问题

当checkbox的值为空时，form（没有使用model方式）不提交该name到后台，也就是没有以该name命名的key/value对提交到后台

解决方法：在form里面添加与checkbox同名的hidden输入

影响：后台需要解决多出来的hidden

timefield/datafield最大最小限制

客户化：当为0时没有限制

客户化：默认值

minValue : pageblockList_key.compts_minValue==0?'' : Ext.Date.add(new Date(), Ext.Date.DAY,

eval(pageblockList_key.compts_minValue)),

maxValue :pageblockList_key.compts_maxValue==0? '' : Ext.Date.add(new Date(),Ext.Date.DAY,

eval(pageblockList_key.compts_maxValue))

value : Ext.Date.add(new Date(),Ext.Date.MINUTE,eval(pageblockList_key.default_value))

value :Ext.util.Format.date(new Date(rec_value.time), 'Y-m-d')

控件readOnly状态下

非空和有效性验证依然有效

grid的columns中

hidden还可以调整为不隐藏

hideable完全隐藏

var columns = [

{header: "后台字段", hidden: true, hideable:false,dataIndex:'db_col_name'},

{header: "用户定义类型", hidden: true, hideable:false,dataIndex:'user_def_type'},

{header: "字段", flex:1,sortable: true, dataIndex:'user_def_name'},

];

view.down('form').getForm().doAction('submit'

(没有callback方法）

在Extjs4中，form提交时，

文本框的emptyText会传到后台,

form提交时配置

submitEmptyText: false

view.down('form').getForm().doAction('submit',

{

clientValidation : true,

url : 'miUpdateRecord.action',

method : 'post',

submitEmptyText: false,

success : function(form,action) {

         view.close();

         Ext.Msg.show({

                                  title:'成功',

                                  msg: '记录更新成功',

                                  buttons: Ext.Msg.OK,

                                  icon:Ext.Msg.INFO

                              });

        view.parentWindow.down('#miGrid').getStore().load();

failure : function(form,action) {

         Ext.Msg.show({

                                  title:'失败',

                                  msg: '记录更新失败请联系管理员',

                                  buttons:Ext.Msg.OK,

                                  icon:Ext.Msg.ERROR

                              });

}

});

map类型使用

import java.util.HashMap;

class maptext

{

public static void main(String[]args)

{

HashMap<Integer, String>map = new HashMap<Integer, String>();

map.put(100,"tom");

System.out.println(map);

｝

}

Map map = newHashMap();
map.put("key","value");
map.get("key");

Ext.apply使用注意

有两个combobox（A、B）控件，分别对应两个store（storeA/storeB，两个store的model一致，在某个条件下，两个store的数据一致），先把storeA apply给控件A，进行操作，没有问题，后面根据条件再把storeB apply给控件B，有问题，执行了但不生效。在控件A没有进行任何操作的情况下，执行把storeB apply给控件B还是可以成功的，如果有操作后（比如点击选择）就不行了。怀疑有数据绑定，解构不了。
然后测试把storeA克隆给StoreB，但还是有奇怪表现。

类似上面的场景，最好是在条件满足的情况下把storeA的数据复制给storeB，条件不满足后再清空store，这样就简单了。

想清楚自己究竟要什么？不要被马甲忽悠了……

java2JSON

package com.test;
import net.sf.json.JSON;
import net.sf.json.JSONObject;
import net.sf.json.xml.XMLSerializer;

public class Test{
public static void javaToJSON() {
System.out.println("java代码封装为json字符串");
JSONObject jsonObj = new JSONObject();
jsonObj.put("username", "张三");
jsonObj.put("password", "123456");
jsonObj.put("column", 5);
jsonObj.put("db_col_name", "kltkkkk");
// System.out.println("java--->json \n" + jsonObj.toString());
System.out.println("java--->json \n" +
jsonObj.getString("db_col_name")
+"\n"+jsonObj.optString("column"));
}

public static void jsonToJAVA() {
System.out.println("json字符串转java代码");
String jsonStr = "{\"password\":\"123456\",\"username\":\"张三\"}";
JSONObject jsonObj = JSONObject.fromObject(jsonStr);
String username = jsonObj.getString("username");
String password = jsonObj.optString("password");
System.out.println("json--->java\n username=" + username
+ "\t password=" + password);
}

public static void jsonToXML() {
System.out.println("json字符串转xml字符串");
String jsonStr = "{\"password\":\"123456\",\"username\":\"张三\"}";
JSONObject json = JSONObject.fromObject(jsonStr);
XMLSerializer xmlSerializer = new XMLSerializer();
xmlSerializer.setRootName("user_info");
xmlSerializer.setTypeHintsEnabled(false);
String xml = xmlSerializer.write(json);
System.out.println("json--->xml /n" + xml);
}

// public static void javaBeanToJSON() {
// System.out.println("javabean转json字符串");
// UserInfo userInfo = new UserInfo();
// userInfo.setUsername("张三");
// userInfo.setPassword("123456");
// JSONObject json = JSONObject.fromBean(userInfo);
// System.out.println("javabean--->json /n" + json.toString());
// }

// public static void javaBeanToXML() {
// System.out.println("javabean转xml字符串");
// UserInfo userInfo = new UserInfo();
// userInfo.setUsername("张三");
// userInfo.setPassword("123456");
// JSONObject json = JSONObject.fromBean(userInfo);
// XMLSerializer xmlSerializer = new XMLSerializer();
// String xml = xmlSerializer.write(json, "UTF-8");
// System.out.println("javabean--->xml /n" + xml);
// }

// public static void xmlToJSON(){
// System.out.println("xml字符串转json字符串");
// String xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><user_info><password>123456</password><username>张三</username></user_info>";
// JSON json=XMLSerializer.read(xml);
// System.out.println("xml--->json /n"+json.toString());
// }

public static void main(String args[]) {
javaToJSON();
// jsonToJAVA();
// jsonToXML();
// javaBeanToJSON();
// javaBeanToXML();
// xmlToJSON();
}
}

Ext中Grid显示Date类型数据的方法

注意renderer中value.time的用法

有一个类Log，里面有个Date类型属性oprTms，使用JSON-LIB将Log对象转换成JSON返回客户端在GridPanel中显示，发现该列显示的值为[object Object]。使用firebug观察回传到客户端的数据为：

oprTms:{"date":15,"day":1,"hours"

:18,"minutes":32,"month":2,"seconds":26,"time":1268649146000,"timezoneOffset":-480,"year":110}

在grid的column定义中，编写renderer如下：

,renderer: function(value) {

if(value!=null){

var kkk=value.time;

var xx=new Date(kkk);

var xxx=Ext.util.Format.date(xx,'Y-m-d');

return xxx;

}else{

return '';

}

excel的日期格式读取

所有日期格式都可以通过getDataFormat()值来判断

yyyy-MM-dd----- 14

yyyy年m月d日--- 31

yyyy年m月------- 57

m月d日 ---------- 58

HH:mm-----------20

h时mm分 ------- 32

以上之外的就是yyyy-MM-dd HH:mm(使用else）

if(format == 14 || format == 31|| format == 57 || format == 58){

//日期

sdf = newSimpleDateFormat("yyyy-MM-dd");

}else if (format == 20 || format== 32) {

//时间

sdf = new SimpleDateFormat("HH:mm");

}else{

sdf = new SimpleDateFormat("yyyy-MM-ddHH:mm");

}

beimi.properties的使用

java代码中文内容

在beimi.properties中添加Name（英文）和value（中文）内容

在serviceContext.xml中对应的bean里面添加<property name="platformName"value="${beimi.platformName}" />

在对应的bean java代码中，创建platformName变量，并创建getter/setter方法，在该bean中就可以应用该中文定义了

为Ext.Msg.show挂上button方法

比Ext.Msg.alert要美观很多

Ext.Msg.show({

title:'登录成功',

msg: respText.message,

buttons: Ext.Msg.OK,

icon: Ext.Msg.INFO,

fn:function(){

location.href='/beimi/index.html';

}

});

// Ext.Msg.alert('提示', '会话超时，请重新登录!', function(){

// location.href='/beimi/index.html';

// });

ajax请求

同步请求：async:false

异步请求：async:true(默认方式）

proxy: {

type: 'ajax',

// url:'getAllLogicSysList.action',

async:false,

…………

Extjs/Ajax中的success和failure 何时调用?

同样是success和failure配置项，Ext.form.Action.Submit与Ext.Ajax.request大不相同且易于混淆

1. Ext.form.Action.Submit的配置选项success、failure

根据返回json中success属性判断的，如果success为true，则success，false则failure，如果无json中无success属性，failure，故要提示操作是否成功，必须要返回success属性。

form.getForm().submit({

// 登录期间显示的文本

loadMask:myMask.show(),

// submit时指向的地址

url:"userAction!login",

success: function(form,action) {

window.location.href = "home.jsp";

failure: function(form,action) {

myMask.hide();

Ext.Msg.alert("错误",action.result.info);

}

});

2. Ext.Ajax.request的配置选项success、failure

根据response的status属性，即状态码决定的，200则为success，404或500等则为failure。这里的success是表示你的服务器响应状态值为200，即表示服务器成功响应。不管你响应给客户端的内容是什么，只要响应成功就会执行这个success，跟你返回的内容无关。至于你想根据你返回的参数success值进行判断分别处理，你得在上面的success中进行判断处理。比如像这样：

Ext.Ajax.request({

url:'admin!select',

method:'post',

waitMsg:'数据加载中，请稍后....',

success:function(response,opts){

                varobj=Ext.decode(response.responseText);

                if(obj.success =="true") {//如果你处理的JSON串中true不是字符串，就obj.success == true

                     //你后台返回success 为 false时执行的代码

                } else {

                     //你后台返回success 为 false时执行的代码

                }