EXT使用心得之GRID篇

最新推荐文章于 2024-11-06 10:24:11 发布

weixin_33768481

最新推荐文章于 2024-11-06 10:24:11 发布

阅读量94

点赞数

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/heguangdong/blog/10680

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近开发一个组件，使用EXT构建页面，其中一个是GRID，把使用过程分享给大家。
首先在页面顶一个DIV

<table width="100%">
<tr>
<td   ><div id='formDiv' style="width:100%" /></td>
</tr>
</table>

注意上面的table和div宽度设置重要，否则显示的时候会有问题。

js实现部分：

所有EXT代码写下面方法内（讲的比较基础，熟悉的兄弟可以略过了）

Ext.onReady(function(){
}

在最初研究的过程中，遇到总是实际的效果和想要的效果不一样的问题？

原因中多加了一段保存用户cooki的脚本，如下：

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

构建一个grid，首先需要一个gridpanel

var grid = new Ext.grid.GridPanel({
      
        cm: cm,
        store: ds,
        stripeRows: true,
        autoExpandColumn: 'logList',
        height:250  ,
        width: Ext.get("formDiv").getWidth(), 
       //title:'grid-test'
        autoScroll: true      
    });
 grid.render('formDiv');

大家看见了实际上就是构建这样一个grid，然后调用grid.render('formDiv');去改变div。

那么cm,store是什么呢？

cm 是ColumnModel的简称，就是你要展示的grid的列的描述。

var cm = new Ext.grid.ColumnModel([

            new Ext.grid.RowNumberer(),                          
    		{id:'caseId',   header: "", dataIndex: 'caseId' ,hidden:true  },
    		{id:'caseId',   header: "caseId", dataIndex: 'caseId' ,hidden:true },
    		{id:'suiteId', header: "suiteId", dataIndex: 'suiteId',hidden:true},
            {id:'suiteName', header: "诊断方案", dataIndex: 'suiteName'},
            {id:'caseName',	 header: "诊断项目", dataIndex: 'caseName' },
            {id:'status',	 header: "检测状态", dataIndex: 'status'},
            {id:'logList',	 header: "检测日志", dataIndex: 'logList' ,hidden:true },
            {id:'logList',	 header: "检测日志", dataIndex: 'logList' ,renderer:renderCodeConf }
	]);
	cm.defaultSortable = true;
	cm.defaultWidth = 75;
       ds.load();

renderer:renderCodeConf

是对该单元格进行重写：

function renderCodeConf(value, cellmeta, record, rowIndex, columnIndex, store){
    
    	    
     	 var _logs = record.data['logList'];
     	 var logs =_logs.join("<*_*>");
 	      //var jsonrecord =Ext.util.JSON.encode(record);
 	     //alert(logs+"="+logs.toJSONString());
		 return "日志";
	}

在传值的过程中，我遇到一个问题，就是我要传一个数组，拼在字符串中的时候就被转换了，无法得到，想了很多办法，比如使用json的一个开源包，将其数组转换为js串，然后再转换回来，结果在火狐好用，IE不好用，弃之，如是使用Ext.util.JSON.encode(record);，如大家所见，注释掉的部分，但是达不到效果，最后想了一个笨方法，大家有好方法的话，告之一下啊，

其次，showLog 这个方法要定义在Ext.onReady(function(){}之外才行。

Store 就是记录集，所有的记录都保存在里面，他的获取方式有很多，静态的那种就不说了，网上很多，我说一下实际中最常用的这种

添加行的点击事件

//添加单击事件
    grid.addListener('cellclick',cellclick);

function cellclick(grid, rowIndex, columnIndex, e) {
    	 
	    var record = grid.getStore().getAt(rowIndex);    
	    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  
              //上面这几个方法大家试一下就知道了，可以得到这一行所有的东西。
	     //do something
            	     Ext.Ajax.request({     
			             url: 'exerunDiagnosis.action',       
			             params: {caseId: '',suiteId:record.get("suiteId")},     
			             callback : function(options, success, response) {
			             	if(success){
			             		 
			             		 Ext.MessageBox.alert("信息提示","OK");
			             		 grid.getStore().load();
			             	}
			                   
			            }  
        		}); 

	    
	}

从后台动态获取过来的叫：Ext.data.HttpProxy

var ds = new Ext.data.Store({
	     proxy : new Ext.data.HttpProxy( {
			url : 'dogetAllDiagnosises.action'
		}),
	     reader: new Ext.data.JsonReader({
	     	totalProperty:'totalSize',
	     	root:'list',
	     	id:'caseId'
	     }, 
		 
	    recordType 
	    )
	});

其中url就是后台的action

struts2配置文件

注意需要继承"json-default"

java后台

/**
 * @Description: json-grid对象基础类
 * @author heguangdong
 * @version Revision: 1.0
 * @date 2010-11-30 上午10:00:45 
 * @since 1.0
 */

/**
 * @author heguangdong
 * 
 */
public class BaseGridJson {

	boolean success;
	String message;
	long totalSize;

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public long getTotalSize() {
		return totalSize;
	}

	public void setTotalSize(long totalSize) {
		this.totalSize = totalSize;
	}

}

/**
 * @Description: Ext-json对象
 * @author heguangdong
 * @version Revision: 1.0
 * @date 2010-11-17 下午07:33:01 
 * @since 1.0
 */


import java.util.List;


/**
 * @author heguangdong
 *
 */
public class DiagnosisJson extends BaseGridJson{

	//所有的数据都封装在这里面
	List list;

	public List getList() {
		return list;
	}

	public void setList(List list) {
		this.list = list;
	}
	
}

上面的对象都是纯java-bean,只需再使用json-lib包将其转化，然后response后去就可以了

json包的pom:

net.sf.json-lib
			json-lib
			2.1
			jar
			jdk15
			compile

http://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.1/

/**
 * @Description: json-handler-action
 * @author heguangdong
 * @version Revision: 1.0
 * @date 2010-11-18 上午10:20:48 
 * @since 1.0
 */


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;


import org.apache.commons.io.IOUtils;
import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

/**
 * @author heguangdong
 *
 */
public class BaseAction extends ActionSupport {
	
	public void outJson(Object obj) {
		outJsonString(JSONObject.fromObject(obj).toString());
	}

	private void outJsonString(String string) {
		getResponse().setContentType("text/javascript;charset=UTF-8");
		outString(string);
	}

	private void outString(String string) {
		PrintWriter out =  null;
		try {
			out = getResponse().getWriter();
			out.write(string);
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}finally {
			IOUtils.closeQuietly(out);
		}
	}

	private HttpServletResponse getResponse() {
		 
		return ServletActionContext.getResponse();
	}
}

大家的action可以继承此类，然后再构建了ext-java-bean后直接调用outJson(vo)就可以了。

下篇讲工具条。

转载于:https://my.oschina.net/heguangdong/blog/10680