java技术 - BlogJava

负载均衡，就是apache将客户请求均衡的分给tomcat1,tomcat2....去处理

在实际的网页开发中，大部分时间都要涉及到Form表单的处理。在Ext框架中也提供了很多这方面的控件，而且还有一个专门的FormPanel布局，该布局默认为放在面板上面的所有控件都是换行放置，而在实际应用中为了美观，有些需要横排，特别是Radio控件，这个时候就需要我们重新定制这些控件的布局了，该例子中使用CSS来实现这些功能，先贴出一张效果图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ext中FormPanel面板及Form控件横排测试(CSS)</title> <link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" /> <style type="text/css" media="all"> .allow-float {clear:none!important;} /* 允许该元素浮动 */ .stop-float {clear:both!important;} /* 阻止该元素浮动 */ .sex-male {float:left;} .sex-female {float:left;padding:0 0 0 20px;} .age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;} </style> </head> <body> <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all.js"></script> <script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script> <script type="text/javascript"> Ext.onReady(function() { //创建Form面板 var fp = new Ext.form.FormPanel({ buttonAlign:'center', labelAlign:'right', labelWidth:40, frame:true, bodyStyle:'padding:8px 0 0 0;', items:[{ xtype:'textfield', fieldLabel:'姓名', name:'n_username', id:'i_username', width:320 },{ xtype:'radio', fieldLabel:'性别', boxLabel:'男', name:'sex', id:'male', itemCls:'sex-male', //向左边浮动,处理控件横排 clearCls:'allow-float', //允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动 checked:true },{ xtype:'radio', boxLabel:'女', name:'sex', id:'female', itemCls:'sex-female', //向左浮动,处理控件横排 clearCls:'allow-float', //允许两边浮动 hideLabel:true //不显示前面"性别"的标签 },{ xtype:'textfield', fieldLabel:'年龄', name:'n_age', id:'i_age', itemCls:'age-field', //向左浮动,处理控件横排 width:133 },{ xtype:'textfield', fieldLabel:'住址', name:'n_address', id:'i_address', itemCls:'stop-float', //不允许浮动,结束控件横排 width:320 }], buttons:[{ text:'确定', handler:onOK //实际应用一般是处理fp.getForm.submit()事件 }, { text:'重置', handler:function(){ fp.getForm().reset(); } }], keys:[{ //处理键盘回车事件 key:Ext.EventObject.ENTER, fn:onOK, scope:this }] });


//确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合

function onOK() {

var strMsg;

strMsg = ‘姓名：’ + fp.getComponent(’i_username’).getValue() + ‘，性别：’;

if (fp.getComponent(’male’).checked) strMsg += ‘男’;

if (fp.getComponent(’female’).checked) strMsg += ‘女’;

strMsg += ‘，年龄：’ + fp.getComponent(’i_age’).getValue();

strMsg += ‘，住址：’ + fp.getComponent(’i_address’).getValue();

alert(strMsg);

}

//创建主窗口 new Ext.Window({ title:’Ext中FormPanel面板及Form控件横排测试(CSS)’, width:400, closable:false, collapsible:true, draggable:false, resizable:false, modal:true, border:false, items:[fp], buttons:[] }).show(); }); </script> </body> </html>

var resource = new Ext.data.Store({
      fields: ['imgpath','typeImage','title', 'type'],
      url: 'teaching/resource/resourceAction.evi?method=getResourceList',
      reader: new Ext.data.XmlReader(
        {
          record: "Item",
          totalRecords: "TotalCount"
        },
      [{name:'title',mapping: 'title'}, {name:'type',mapping: 'type'},{name:'imgpath',mapping: 'imgpath'},{name:'typeImage',mapping: 'typeImage'} ]
    )
});

resource.addListener('load', function(st, rds, opts) {
        // st 是当前的store, rds是读到的Record[], opts是store的配置
   for( var c=0; c<rds.length; c++ ) {
       rds[c].set('typeImage', "<img src='./images/33.gif' width='12' height='12' />");
       //待定类别，先定死类别图片
      }
});

var resourceType = new Ext.data.Store({
url:'teaching/resourceType/resourceTypeAction.evi?method=getResourceTypeList',
      reader: new Ext.data.XmlReader({
      record: "Item"
     }, [
      {name: 'resourceTypeId', mapping: 'resourceTypeId'},
       {name: 'resourceType', mapping: 'resourceType'}
      ])
   });
resourceType.load();
var languageType = new Ext.data.Store({
url:'teaching/languageType/languageTypeAction.evi?method=getLanguageTypeList',
      reader: new Ext.data.XmlReader({
      record: "Item"
     }, [
       {name: 'languageTypeId', mapping: 'languageTypeId'},
       {name: 'languageType', mapping: 'languageType'}
      ])
   });
languageType.load();

resourcePanel = new Ext.grid.GridPanel({
id: 'resources',
frame: true,
header: false,
width: 288,
autoWidth: true,
autoHeight: true,
loadMask:{msg:'正在加载数据，请稍侯……'},
iconCls:'icon-grid',
viewConfig: { forceFit: true },
   columns:[
{header: " ",dataIndex: 'typeImage' , width:20},
{header: "资源标题", width: 190, sortable: true, dataIndex: 'title'},
{header: "类别", width: 80, sortable: true, dataIndex: 'type'}
   ],
store: resource,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
     bbar: new Ext.PagingToolbar({
pageSize: 10,
store: resource,
displayInfo: false,
//displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
      }),
listeners: {
rowclick:function(e) {
   try {
    window.parent.parent.Ext.ux.MyTips.msg("提示", "双击该行可预览该资源");
    } catch(e) {}
    },
rowdblclick:function(g, rIdx, e) {
   var rd = g.getStore().getAt(rIdx);
   var html = "<img src='./images/" + rd.get('imgpath') + "' />";
window.parent.showWin({
      layout: 'fit',
      maximizable: true,
      title: rd.get('title'),
      width: 400,
      height: 400,
      //modal: true,
      //closeAction: 'hide',
      plain: true,
      items: [ {html: html} ]
    });
}
}
});

public ActionForward getResourceList(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws IOException {

Document document = DocumentHelper.createDocument();
String start = request.getParameter("start");
String limit = request.getParameter("limit");
String keyword = request.getParameter("keyword");
String resourceTypeId = request.getParameter("resourceTypeId");
String languageTypeId = request.getParameter("languageTypeId");

List<HqlCondition> hqlFilter = new LinkedList<HqlCondition>();
if(keyword != null && keyword.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.title", "like", "%" + keyword + "%", HqlCondition.String) );
   hqlFilter.add( new HqlCondition("or", "rs.remarks", "like", "%" + keyword + "%", HqlCondition.String) );
}
if(resourceTypeId != null && resourceTypeId.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.resourceType.resourceTypeId", "=", new Long(resourceTypeId), HqlCondition.Long) );
}
if(languageTypeId != null && languageTypeId.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.languageType.languageTypeId", "=", new Integer(languageTypeId), HqlCondition.Integer) );
}
int pageno =1;
int pagesize = 10;
if(limit != null && limit.length()>0){
      pagesize = Integer.parseInt(limit);
}

if(!start.equalsIgnoreCase("0") && start != null && start.length()>0){
     int bpos = Integer.parseInt(start);
     pageno = (bpos + pagesize)/pagesize;
}
int total = this.rse.getResourceTotalCount(hqlFilter);
Collection<BaseVO> coll = this.rse.getResourceList(hqlFilter,pageno,pagesize);
Iterator<BaseVO> it = coll.iterator();
while(it != null && it.hasNext()){
   BaseVO bv = it.next();
   ResourceType rt = this.rts.getResourceType(((ResourceType)bv.get("resourceType")).getResourceTypeId());
   bv.set("type", rt.getResourceType());
}
document.addElement("type");
new OutputVOXml().writeXML(total,new LinkedList<BaseVO>(coll), response);
return null;
}

它会将整个action中的变量转化为JSON数据(根对象在JSON中数据添加一个”root”标识)。如果要使用它，Action必须遵循以下几点：

1. 返回的页面类型中”content-type”必须是”application/json”.(这个已经Internet Community采用).

3. Action中field必须有public的set方法.(是不是没有set方法就不会将field添加到JSON数据中，有待验证).

4. 它支持的类型有: 基本类型(int,long...String), Date, List, Map, Primitive Arrays, 其它class, 对象数组.

5. 在JSON中任何的Object会被封装在list或map中，数据会被封装程Long，如果是含有的数据则会被封装程Double，数组会被封装程List.

可以通过配置来显示指出要放在JSON中field，其中有个自己的验证规则需要研究.

如果wrapWithComments设置为true(默认值为false)，则生成的JSON数据会变成这样：

Var responseObject = eval("("+data.substring(data.indexOf(""/"*")+2, data.lastIndexOf(""*"/"))+")");

“root”对象中父类的field不会默认存放到JSON数据中，如果不想这样做，需要在配置时指定ignoreHierarchy为false:

默认处理枚举类型时，会被处理成JSON数据中name等于枚举中value而value等于枚举中name.

如果在处理枚举类型时，在xml中配置了enumAsBean，则会被当作一个Bean处理，在JSON数据中会有一个特别的属性”_name”值为name().这个枚举中的所有属性都会被处理.

JSON插件可以在js中调用action方法，返回执行结果。这个已经在dojo中有了实现，可以用Simple Method Definition调用远程服务。来一起看看下面的例子：

e) 方法必须用SMDMethod加上注解，这样才能被远程调用，为了安全因素。这个方法会产生一个bean对象，实现修改价格的功能。Action被添加上SMD注解会生成一个SMD，同时参数也会被加上SMDMethodParameter注解。像你所看到的，Action中定义了一个空方法：smd。这个方法是作为Simple Method Definition (定义class中提供的服务)，在struts.xml配置<result>时使用type属性值为”json”。

这里需要注意一点:” enableSMD”这个必须在interceptor和result都要配置.

JsonService会发出一个请求到action加载SMD，同时远程方法会返回一个JSON对象，这个过程是Dojo给action中的方法创建了一个Proxy。因为这是异步调用过程，当远程方法执行的时候，它会返回一个对象到callback方法中。

当使用的注解不是继承自Java，可能你使用代理会出现一些问题。比如：当你使用aop拦截你的action的时候。在这种情况下，这个插件不会自动发现注解的方法。为了避免这种情况发生，你需要在xml中配置ignoreInterfaces为false，这样插件会自己查找注解的所有接口和父类。

注意：这个参数只有在Action执行的过程是通过注解来运行的时候才应该设为false。

注释名	简介	默认值	序列化	反序列化
name	配置JSON中name	empty	yes	no
serialize	在serialization中	true	yes	no
deserialize	在deserialization中	true	no	yes
format	格式化Date字段	"yyyy-MM-dd'T'HH:mm:ss"	yes	yes

常用链接

留言簿(2)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜

一、从零开始

二、零配置

三、使用COC