EXTJS4.0.7开发积累(6)

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

修改tabpanel的tab标签宽度

如何靠左还不知???

tabBar : {

     minTabWidth:150,

    },

item例子

checkboxgroup

checkbox

listener

for(var i in itemList){

var item={

                         inputValue:itemList[i].db_col_name

                          ,boxLabel:itemList[i].user_def_name

                          ,name:'grid_deal_db_col_name'

                         ,itemId:'grid_deal_db_col_name'+authGrpCheckedArray1[key].inputValue+i

                          ,checked:true

                         ,user_num:authGrpCheckedArray1[key].inputValue

                          ,user_i:i,

                          listeners:{

                               change:function(field, newValue, oldValue){

                                console.info('newValue:'+newValue);

                               if(newValue==false){

  thiswindow.down('#gridtab'+this.user_num).down('#grid_display_db_col_name'+

this.user_num+this.user_i).setValue(false);

                                }

                           }

                           }

         };

checkboxgrp_deal.add(item);

}

grid选中行上下移动

结合记录的值

var grid =Ext.getCmp('accessCPGridPanel');

var store = grid.getStore();

var record =grid.getSelectionModel().getSelected();

var index =store.indexOf(record);

//上移

if (index > 0) {

store.removeAt(index);

store.insert(index - 1, record);

grid.getSelectionModel().select(index- 1);

}

//下移

if (index < store.getCount() -1) {

store.removeAt(index);

store.insert(index + 1, record);

grid.getSelectionModel().select(index+ 1);

}

 

结合记录的值,可以对上下移动范围进行更细致的控制:

var gridtmp=me.up('grid');

var store = gridtmp.getStore();

var record = gridtmp.getSelectionModel().getSelection();

var index = store.indexOf(record[0]);

if (index < store.getCount() - 1 && record[0].get('compts_type')==store.getAt(index+1).get('compts_type')){

  store.removeAt(index);

  store.insert(index + 1, record);

  gridtmp.getSelectionModel().select(index + 1);

}

获取store里面某列的所有值字符串

var store =this.up('window').down('grid').getStore();

var arrs=[];

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

arrs.push(item.get('id'));

});

//                console.info('pageblockorderarrs: '+arrs.toString());

this.up('window').parentwindow.down('#page_block_order').setValue(arrs.toString());

grid属性

xtype:'grid',

forceFit:true,

设置了forceFit后,grid如果是window的子元素,grid可以完美结合window框体

 

columns:[

                     {

                         header: '控件名称',

                         dataIndex:'page_block_label'

                         ,sortable:false

                         ,width:150

                     }

}

设置了sortable为false(默认true)可以禁止该列排序,有的特别应用不需要该排序功能
form提交时,添加非form里面的额外参数

handler: function() {
var colsetting=new Array(); 
gridStore.each(function(record) { colsetting.push(record.data); });
  
var form = this.up('form').getForm();
if(form.isValid()){
  form.submit({
params: {colset:Ext.encode(colsetting)},
url: 'importFromUpload.action',


waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
  });
   }
}
后台读取:
String strJson=getRequest().getParameter("colset");

POI解析excel时,使用ss代替hssf和xssf

可以同时支持xls和xlsx

public static Workbookcreate(InputStream in) throws    

    IOException,InvalidFormatException {

       if (!in.markSupported()) {

            in = new PushbackInputStream(in,8);

        }

        if (POIFSFileSystem.hasPOIFSHeader(in)){

            return new HSSFWorkbook(in);

        }

        if (POIXMLDocument.hasOOXMLHeader(in)){

            return newXSSFWorkbook(OPCPackage.open(in));

        }

        throw newIllegalArgumentException("上传文件对应的excel版本,POI工具包目前不支持");

    }

调用:

importorg.apache.poi.ss.usermodel.Row;

importorg.apache.poi.ss.usermodel.Sheet;

importorg.apache.poi.ss.usermodel.Workbook;

 

InputStream stream = newFileInputStream(getFile());

Workbookwb=ExcelUtils.create(stream);

Sheet sh=wb.getSheetAt(0);

int rowNum=0;

Row row=null;

row= sh.getRow(rowNum);

Stringcell0=row.getCell(0).getStringCellValue().trim();

System.out.println("cell0:"+cell0);

Radiogroup的change事件处理

(在4.0.7中会触发两次:

checked-unchecked,unchecked-checked)

在loadRecord的时候也会触发change事件

不是很好控制

 

如果改成combobox好控制多了

 

radiogroup尽量不要用于控制复杂的地方

xtype      : 'radiogroup',
fieldLabel : '',
allowBlank : false,
itemId:'compts_type',
layout: 'hbox',
items: [
  {
  boxLabel  : '单体控件',
  name      : 'compts_type',
  inputValue: 1,
  checked   : true
  },
  {
  boxLabel  : '复合控件',
  name      : 'compts_type',
  inputValue: 2,
  }
]
,listeners: {
"change": function(g, newValue, oldValue, eOpts) {
var thisform=this.up('form');
var compts_type = newValue.compts_type;
console.info('compts_type:'+compts_type);
if( compts_type == 1){
thisform.down('#read_save_place').enable();
thisform.down('#unique_set').enable();
thisform.down('#page_block_label').reset();
thisform.down('#compts_xtype').reset();
thisform.down('#compts_xtype').store.removeAll();
thisform.down('#compts_xtype').store.proxy.extraParams.compts_type=compts_type;
thisform.down('#compts_xtype').store.load();
}else if(compts_type == 2){
thisform.down('#read_or_write').reset();
thisform.down('#tblid').reset();
thisform.down('#colid').reset();
thisform.down('#read_save_place').disable();
thisform.down('#unique_set').disable();
thisform.down('#page_block_label').reset();
thisform.down('#compts_xtype').reset();
thisform.down('#compts_xtype').store.removeAll();
thisform.down('#compts_xtype').store.proxy.extraParams.compts_type=compts_type;
thisform.down('#compts_xtype').store.load();
}
}
}

store在load前设置额外参数

thisform.down('#compts_xtype').store.proxy.extraParams.compts_type=records[0].get('id');

与在compts_xtype combobox控件中store:Ext.create('DM.store.ComptsStore').load({params:{compts_type:myself.compts_type}})

效果一致

 

特别补充:

方式一:

var page_list_store =Ext.create('DM.store.PagesStore').load({params:{menuTreeId:this.id}});

里面设置的参数,只一次有效,刷新时参数消失。

方式二:

page_list_store.on('beforeload',function (store, options) {

                var new_params = {

                     menuTreeId:me.id

                };

                Ext.apply(store.proxy.extraParams, new_params);

});

page_list_store.load();

此种方式下,刷新的时候参数还在

单对象经过JSONArray.fromObject处理后

返回到IE的还是数组型JSON数据

long gridsetting_id=new Long(getRequest().getParameter("gridsetting_id")).longValue();
GridSetting gs=pageBlockService.getGridSettingById(gridsetting_id);


JSONArray array = JSONArray.fromObject(gs);
this.setJsonString("{success:true,totalCount : " + 1 + ", gs:" + array.toString() + "}");
return SUCCESS;
尽管JSONArray array = JSONArray.fromObject(gs);里面的gs只是一个对象,但返回给IE的还是数组型JSON数据。
{success:true,totalCount : 1, gs:[{"add_button":true,"add_page_id":0,"db_tbl_name":"LogicSys_1_Tbl_2"}]}

sql必不可少内容填充

mysql> select count(*),'notable' from pageblock;

+----------+----------+

| count(*) | no table |

+----------+----------+

|        6 | no table |

+----------+----------+

注意如上的sql用法,‘no table’可以用来填充必不可少的数据部分

在同一个DAO方法里面

创建多个query

进行多个查询

并合并在一起

Query query_compts_type_1 =sessionFactory.getCurrentSession().createQuery(sb_compts_type_1.toString());

List<PageBlockList>list_compts_type_1=query_compts_type_2.setFirstResult(start).setMaxResults(limit).list();

Query query_compts_type_2 =sessionFactory.getCurrentSession().createQuery(sb_compts_type_2.toString());

List<PageBlockList>list_compts_type_2=query_compts_type_2.setFirstResult(start).setMaxResults(limit).list();

list_compts_type_1.addAll(list_compts_type_2);

grid的store操作及表现

//                                   view.parentWindow.down('#miGrid').getStore().removeAll();

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

//                                      {

//                                                params:{

//                                                   start:0,

//                                                   limit: 20

//                                               }

//                                            }

                                      );

执行removeAll()的时候,grid里面的记录瞬间被删除

load的时候,没有必要指导start和limit,这是默认的,需要额外的参数可以查看本文的其他条目

在没有执行removeAll的情况下执行load,会把新添加的记录平滑地展示到grid表中,removeAll在load的效果台突兀,闪眼睛。
AJAX提交字段规范ajax提交的name字段,如果以数字开头,会报错:ognl.ExpressionSyntaxException:Malformed OGNL expression【不干活不知道啊……】

grid记录里面包括后台记录的id但不显示

修改和删除操作需要知道id值

handler: function(grid, rowIndex,colIndex) {

                                         varrec = grid.getStore().getAt(rowIndex);

                                        console.info('id_edit:'+rec.get('id'));

希望在grid的actioncolumn事件处理函数中可以获取到后台记录的id,但不在grid中显示/隐藏,先是到grid的column设置中去找配置方法,

但都没有符合要求的配置方法。转而到grid的store的model中添加id字段,但在grid的column中不配置id,然后就可以得到id值了。

解决问题的思路要发散些……

为form添加额外的数组属性

{
xtype: 'form',
plain: true,
frame: true,
border: 0,
bodyPadding: 5,
user_validation:new Array(),
defaults: {
layout: 'column'
}
注意里面的user_validation:new Array()属性为开发人员自定义属性
添加元素方法:view.down('form').user_validation.push({"name":pageblockList[key].db_col_name,"value":false});
访问元素方法:如下操作便完成修改,不需要回写【Ext.appaly】
for(var i in me.up('form').user_validation){
if(me.up('form').user_validation[i].name==me.getItemId())
me.up('form').user_validation[i].value=false;
}
Filter&intercept最近使用ssh2做一个网站,因为需要对action和jsp都进行访问控制,因此使用Filter来对请求进行过滤。在web.xml中配置好之后发现对jsp的访问能够过滤,但是过滤不了对action的请求。调试后发现访问action时用于请求过滤的Filter根本就没执行。于是在web.xml中改变Filter的映射顺序,将请求过滤的Filter放到Struts2的核心过滤器之前,则可成功对action进行过滤。这里Filter的调用顺序根据web.xml中<filter-mapping>的声明顺序,而不是根据<filter>元素的声明顺序
我找到原因了  .action 的请求被struts2 自带的过滤器拦截后就不出来了    所以我用intercept做了
拦截器由spring管理,只对action起作用,不能拦截jsp页面、图片等其他资源。拦截器截获用户对action的访问,如需要跳转,只需如action一样返回一个result,spring根据result的配置执行跳转。如无需跳转,可调用invocation.invoke();方法来执行用户请求的action。拦截器在action之前开始,在action完成后结束(如被拦截,action根本不执行)
 
 
如不进行处理,过滤器和拦截器都会将正常的登录操作屏蔽,因此过滤器中需要判断用户访问的url是否为登录操作或登录页面,拦截器中需要判断用户访问的action是否登录action。
配置servlet的<url-pattern>时,容器会首先查找完全匹配,如果找不到,再查找目录匹配,如果也找不到,就查找扩展名匹配。 如果一个请求匹配多个“目录匹配”,容器会选择最长的匹配。
① 完全匹配
<!-- 必须以一个“/”开头,可以有扩展名,但不是必需的。 -->  
<url-pattern>/test/list.do</url-pattern>  
② 目录匹配
<!-- 必须以一个“/”开头,目录可以是虚拟或实际的,总是以一个“/*”结束 -->  
<url-pattern>/test/*</url-pattern>  
③ 扩展名匹配
<!-- 必须以“*”加“.”加扩展名的形式 -->  
<url-pattern>*.do</url-pattern>  

_dc URL

_dc is a cache buster parameter. (dc - disable caching) GET requests are aggressively cached by the browser and by appending a unique timestamp it disables the browser cache. 
You can set the configuration noCache to false on the Proxy to turn this behavior off. (Or change the cacheString via the cacheString configuration)
This is where the API comes in handy.
Ext.data.Proxy.Server
The noCache is a config option set in the proxy. In your model or store when configuring your proxy you would set noCache: false like so:
var store = new Ext.data.Store({
model: 'myModel',
proxy: {
type: 'server',
url: ..some.url...,
reader: 'json',
noCache: false //this will allow browser to cache, thus removing _dc param
}
});

页面不缓存方法

<HEAD> 

<METAHTTP-EQUIV="Pragma" CONTENT="no-cache"> 

<METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 

<METAHTTP-EQUIV="Expires" CONTENT="0">

</HEAD>

Extjs在客户端跳转页面

如果用户没有加载extjs页面,

而是直接访问action,该问题处理不了

app.js
Ext.Ajax.on('requestcomplete',function(conn,response,options) {     
if(response && response.getResponseHeader && response.getResponseHeader('_timeout')){    
Ext.Msg.alert('提示', '会话超时,请重新登录!', function(){    
location.href='http://localhost:8080/beimi/session.html';     
});    
}
});
后台的fielter中,当发现session为空且不是正常登录及登录前访问时,设置如下:
response.addHeader("_timeout","true");
前台extjs会跳出超时提示,点击确定按钮后会定位到session.html页面
Ext.Ajax.on('requestexception', function(conn, response, options) {
alert('failed'+response.status)
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值