`
jsczxy2
  • 浏览: 1275310 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

EXT 3.x 使用详解之Ext.History浏览器前进后退功能(二)--整合grid分页

    博客分类:
  • ext
阅读更多

这篇是针对我以前所写的一个例子进行了对history的修改,修改以后可以针对URL的带参数链接进行访问具体某一页,比如http://localhost:8080/MyTest/ext/test_history_2.jsp#start-6--limit-3直接打开的是第三页,而不是一开始打开就是第一页,再进行扩展以后可以记录例如搜索等关键字。。。当然最基本的也就是增加了浏览器的前进后退功能啦,下面介绍具体代码(自己导入json相关类以及ext相关js):

1.test_history_2.jsp代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>

<style type="text/css">
	
	html,body{
	margin:0px;
	height:100%;
	}
	
	#content{
	height:100%;
	width:100%;
	}
</style>

</head>
	<body style="height:100%">
	<script type="text/javascript">
	//本例加入了grid组件的ajax以及分页的功能
	var grid;
	
	var cm;
	
	var ds;
	//分页标签栏
	var bbar;
	//全局高度设定,用来调整整个grid的高度
	var h;
	//设置主截断符
    var maintokenDelimiter = '--';
    //设置次截断符
    var tokenDelimiter = '-';
	//为history保存的params对象
	var o = {};
	//性别详细
	function renderSex(value) {
		if (value == 'male') {
		return "<span style='color:red;font-weight:bold;'>男</span>";
		} else {
		return "<span style='color:green;font-weight:bold;'>女</span>";
		}
	}
	//描述详细
	function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){
		var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列";
		return str;
	}
	
	Ext.onReady(function()
		{
	//初始化history组件
 	Ext.History.init();
 
	//对列的定义
	cm = new Ext.grid.ColumnModel([
		{header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/5,sortable:true,dataIndex:'id'},//sortable 可排序,具体体现在有排序选项卡
		{header:'<font color="blue">日期</font>',width: Ext.get("content").getWidth()/5,dataIndex:'time',renderer:Ext.util.Format.dateRenderer('Y-m-d h:i:s')},
		{header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/5,dataIndex:'sex',renderer:renderSex},
		{header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/5,dataIndex:'name'},
		{header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/5,dataIndex:'descn',renderer:renderDescn}
	]);
	//ajax代理
	var proxyParam={  
        url:contextPath + '/search.do?method=SearchAjax',  
        method:'GET'  
   	 }; 
	//对ajax返回的json数据进行解析,
	var jsonReaderMeta={  
		root: 'grids',//Json对象的root名称,与SearchVO的属性相对应
		totalProperty: 'totalCount', //数据的总行数 ,与SearchVO的属性相对应
   		id: 'id'  //数据的主键,与GridVO的属性相对应
     };  
	//解析Json数据的类型
	var recordType=[  
        {name: 'id', mapping: 'id'}, 
        //日期类型如果是String也可以表明为date型,不过需要标明pattern,具体pattern可查api中date类
        {name: 'time', mapping: 'time',type : 'date',dateFormat : 'Y-m-d h:i:s' },   
        {name: 'sex', mapping: 'sex'},  
        {name: 'name', mapping: 'name'},  
        {name: 'desc', mapping: 'desc'}  
      ]; 
	//定义dataStore
	ds = new Ext.data.Store({  
        proxy: new Ext.data.HttpProxy(proxyParam),  
        reader: new Ext.data.JsonReader(jsonReaderMeta,recordType),
        remoteSort:true  //允许到后台进行排序
     });
     //定义分页标签
	bbar = new Ext.PagingToolbar({
		pageSize: 3,
		store: ds,
		displayInfo: true,
		displayMsg: '第{0} 到 {1} 条数据 共{2}条',
		emptyMsg: "没有数据",
		//获得start参数以便加入history等方法
		doLoad: function(start){
			/***源码中执行类似此段内容
	            var o = {};
	            var pn = this.store.paramNames;  
	         o[pn.start] = start;  
				o[pn.limit] = this.pageSize;  
				this.store.load({params:o});  
			***/	
			
	        var pn = this.store.paramNames;  
			//改为history操作
			Ext.History.add(pn.start+tokenDelimiter+start+maintokenDelimiter+pn.limit+tokenDelimiter+this.pageSize);
		}  
      }); 
	//创建grid对象
	grid = new Ext.grid.GridPanel({
		renderTo: 'content',
		width: Ext.get("content").getWidth(),
		store: ds,
		cm: cm,
		loadMask: true,
		bbar: bbar
		//如果需要每列自动填满Grid,可以使用viewConfig配置中的foreceFit
		//viewConfig:{forceFit:true}
	});
	//加载dataStore,此时可以带一些必要的参数提交到后台
        //此处交由history来触发ds.load就不用自己加载了,已经注释掉
	//ds.load({params:{start:0, limit:3}});
	//在dataStore加载的时候进行高度的自动调整
	ds.on('load', function(){ 
		h = $('.x-panel-bbar').height()+$('.x-grid3-body').height()+$('.x-grid3-header').height()+20;
		grid.setHeight(h); 
       });
    
     //获取浏览器hash中#后面的字符串
    Ext.History.on('change', function(token){
        if(token){
        //如果有字符串则进行相应处理
        	var parts = token.split(maintokenDelimiter);
        	for(i=0;i<parts.length;i++){
       			if(!Ext.isEmpty(parts[i])){
        			var keyword = parts[i].split(tokenDelimiter);
        			o[keyword[0]] = parseInt(keyword[1]);  
       			}
        	}
        	bbar.store.load({params:o});
        }
    });
    
    //如果使用带有参数的url直接访问,那么由loadHref()方法进行解释
    function loadHref(){
    	var href = window.location.href;
    	if(href.indexOf('#')>0){
    	  var o = href.split('#');
    	  //激活history的change事件
		  Ext.History.fireEvent('change',o[1]);     	
    	}else{
    	  //直接默认第一个标签页, 激活history的change事件
    	  Ext.History.add("start-0--limit-"+bbar.pageSize);
    	  Ext.History.fireEvent('change',"start-0--limit-"+bbar.pageSize);     
    	}
    }
	loadHref();
    
	});
	
	
	//自动适应浏览器窗口调整
	window.onresize=function(){
		cm = new Ext.grid.ColumnModel([
			{header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/5,sortable:true,dataIndex:'id'},
			{header:'<font color="blue">日期</font>',width: Ext.get("content").getWidth()/5,dataIndex:'time',renderer:Ext.util.Format.dateRenderer('Y年m月d日h时m分s秒')},
			{header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/5,dataIndex:'sex',renderer:renderSex},
			{header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/5,dataIndex:'name'},
			{header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/5,dataIndex:'descn',renderer:renderDescn}
		]);
		if(grid){
			grid.setWidth(Ext.get("content").getWidth());
			//重新载入dataStore和cm,此时会根据数据以及新设定的cm自动调整宽和高
	        grid.reconfigure(ds,cm);
        }
	};
	
    </script>
    
<div id="content"><div>
	<!-- Ext.History所需的form  begin-->
		<form id="history-form" class="x-hidden">  
             <input type="hidden" id="x-history-field" />  
             	<iframe id="x-history-frame">  
             </iframe>  
        </form> 
    <!-- Ext.History所需的form  end -->  
	</body>
</html>

 

 


2.下面是后台search.do部分(注意实用了json数据类型,请加入json相关的包):

 

public ActionForward SearchAjax(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		Integer start = Integer.valueOf(request.getParameter("start"));
		Integer limit = Integer.valueOf(request.getParameter("limit"));
		System.out.println("start:" + start + "|limit:" + limit);
		String sort = request.getParameter("sort");
		String dir = request.getParameter("dir");
		if (StringUtils.isBlank(sort)) {
			sort = "id";
		}
		if (StringUtils.isBlank(dir)) {
			dir = "ASC";
		}
		System.out.println("sort:" + sort + "|" + dir);
		List<GridVO> lists = new ArrayList<GridVO>();
		GridVO vo = new GridVO();
		vo.setId(1);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name1");
		vo.setDesc("descn1");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(2);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name2");
		vo.setDesc("descn2");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(3);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name3");
		vo.setDesc("descn3");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(4);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name4");
		vo.setDesc("descn4");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(5);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name5");
		vo.setDesc("descn5");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(6);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name6");
		vo.setDesc("descn6");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(7);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name7");
		vo.setDesc("descn7");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(8);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name8");
		vo.setDesc("descn8");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(9);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name9");
		vo.setDesc("descn9");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(10);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name10");
		vo.setDesc("descn10");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(11);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name11");
		vo.setDesc("descn11");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(12);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name12");
		vo.setDesc("descn12");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(13);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name13");
		vo.setDesc("descn13");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(14);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name14");
		vo.setDesc("descn14");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(15);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name15");
		vo.setDesc("descn15");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(16);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name16");
		vo.setDesc("descn16");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(17);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name17");
		vo.setDesc("descn17");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(18);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name18");
		vo.setDesc("descn18");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(19);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name19");
		vo.setDesc("descn19");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(20);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name20");
		vo.setDesc("descn20");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(21);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name21");
		vo.setDesc("descn21");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(22);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name22");
		vo.setDesc("descn22");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(23);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name23");
		vo.setDesc("descn23");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(24);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name24");
		vo.setDesc("descn24");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(25);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name25");
		vo.setDesc("descn25");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(26);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name26");
		vo.setDesc("descn26");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(27);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name27");
		vo.setDesc("descn27");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(28);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name28");
		vo.setDesc("descn28");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(29);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name29");
		vo.setDesc("descn29");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(30);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name30");
		vo.setDesc("descn30");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(31);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name31");
		vo.setDesc("descn31");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(32);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name32");
		vo.setDesc("descn32");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(33);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name33");
		vo.setDesc("descn33");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(34);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name34");
		vo.setDesc("descn34");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(35);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name35");
		vo.setDesc("descn35");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(36);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name36");
		vo.setDesc("descn36");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(37);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name37");
		vo.setDesc("descn37");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(38);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name38");
		vo.setDesc("descn38");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(39);
		vo.setTime(dateFormat());
		vo.setSex("male");
		vo.setName("name39");
		vo.setDesc("descn39");
		lists.add(vo);
		vo = new GridVO();
		vo.setId(40);
		vo.setTime(dateFormat());
		vo.setSex("female");
		vo.setName("name40");
		vo.setDesc("descn40");
		lists.add(vo);
		// 排序
		lists = sortObj(lists, sort, dir);

		SearchVO searchVO = new SearchVO();
		searchVO.setTotalCount(lists.size());
		lists = findCurrentPageObj(lists, start, limit);
		searchVO.setGrids(lists);
		JSONObject obj = JSONObject.fromObject(searchVO);
		System.out.println(obj.toString());
		response.setContentType("text/xml;charset=utf-8");
		response.getWriter().print(obj.toString());
		return null;
	}

	private List<GridVO> sortObj(List<GridVO> list, String sort, String dir) {
		Set<ResultTokenDelegate> someSet = new TreeSet<ResultTokenDelegate>();
		List<GridVO> result = new ArrayList<GridVO>();
		for (GridVO res : list) {
			ResultTokenDelegate delegate = new ResultTokenDelegate(res, sort,
					dir);
			someSet.add(delegate);
		}
		Iterator iterator = someSet.iterator();
		while (iterator.hasNext()) {
			ResultTokenDelegate delegate = (ResultTokenDelegate) iterator
					.next();
			result.add(delegate.getResult());
		}
		return result;
	}

	List<GridVO> findCurrentPageObj(List<GridVO> list, int start, int limit) {
		List<GridVO> vos = new ArrayList<GridVO>();
		for (int i = 0; i < list.size(); i++) {
			if (i >= start && i < (start + limit)) {
				vos.add(list.get(i));
			}
		}
		return vos;
	}

	String dateFormat() {
		SimpleDateFormat smf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
		Date date = new Date(System.currentTimeMillis());
		return smf.format(date);
	}

 


3.ResultTokenDelegate类的代码,用来为list对象排序的:

package com.xuyi.util.sort;

import com.xuyi.vo.GridVO;

public class ResultTokenDelegate implements Comparable {

	private GridVO result;

	private String sort;

	private String dir;

	public ResultTokenDelegate() {
	}

	public ResultTokenDelegate(GridVO result, String sort, String dir) {
		this.result = result;
		this.sort=sort;
		this.dir=dir;
	}

	public GridVO getResult() {
		return result;
	}

	public void setResult(GridVO result) {
		this.result = result;
	}

	public String getDir() {
		return dir;
	}

	public void setDir(String dir) {
		this.dir = dir;
	}

	public String getSort() {
		return sort;
	}

	public void setSort(String sort) {
		this.sort = sort;
	}

	public int compareTo(Object o) {
		ResultTokenDelegate ntd = (ResultTokenDelegate) o;
		if ("id".equals("id")) {
			if ("ASC".equals(dir)) {
				if (this.getResult().getId() < ntd.getResult().getId()) {
					return -1;
				} else if (this.getResult().getId() == ntd.getResult().getId()) {
					return 1;
				} else {
					return 1;
				}
			}else{
				if (this.getResult().getId() < ntd.getResult().getId()) {
					return 1;
				} else if (this.getResult().getId() == ntd.getResult().getId()) {
					return 1;
				} else {
					return -1;
				}
			}
		}else{
			return 1;
		}
	}

}

 

4.GridVO类的代码:

package com.xuyi.vo;

public class GridVO {
	
	int id;
	
	String sex;
	
	String name;
	
	String desc;
	
	String time;


	public String getTime() {
		return time;
	}

	public void setTime(String time) {
		this.time = time;
	}

	public String getDesc() {
		return desc;
	}

	public void setDesc(String desc) {
		this.desc = desc;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}
	
	
}

5. SearchVO的代码:

package com.xuyi.vo;

import java.util.ArrayList;
import java.util.List;

public class SearchVO {
	
	int totalCount;
	
	List<GridVO> grids = new ArrayList<GridVO>();

	public List<GridVO> getGrids() {
		return grids;
	}

	public void setGrids(List<GridVO> grids) {
		this.grids = grids;
	}

	public int getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	
	
}

 

6.具体效果可以通过直接访问例如:http://localhost:8080/MyTest/ext/test_history_2.jsp#start-6--limit-3

这样的URL就可以直接页面grid显示第3页的内容了,当然还能前进后退咯,呵呵

1
0
分享到:
评论

相关推荐

    Ext3.x样式 Ext3.x皮肤

    Ext3.x是一款经典的JavaScript库,主要用于构建富客户端应用程序,它提供了丰富的用户界面组件和强大的数据管理功能。在Ext3.x中,"样式"和"皮肤"是两个关键概念,它们对于提升应用程序的视觉效果和用户体验至关重要...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    ext3.jar ext使用非常多

    EXT3.jar是EXT框架的一个版本,它包含EXT库的Java版本,通常用于Java Web应用程序,使得开发者能够利用EXT的组件和功能在服务器端进行渲染和处理。 EXT框架的核心在于其丰富的组件库,包括数据网格、表单、窗口、...

    Ext.Ajax.request2.x实现同步请求

    `ext-basex.js`是EXTJS的基础组件文件,其中包含了Ajax请求的相关实现。在旧版本中,可能需要对请求选项进行更详细的配置来适应不同的浏览器环境。 在EXTJS中,`Ext.Ajax`对象提供了丰富的配置项和方法,如`params`...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    Ext.grid.GridPanel属性祥解

    `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...

    ext3.x 改写的datatimefiled时间控件

    在EXT JS框架中,"ext3.x 改写的datetimefield时间控件"是一个自定义组件,主要用于增强原生EXT JS 3.x版本中的DateTimeField功能。这个控件为用户提供了更丰富的日期和时间选择能力,增加了对时、分、秒的选择,...

    Ext2.x中文api 非常完美的中文api

    Ext2.x中文API是针对Ext2.x框架的一个详尽的中文文档,对于使用这个JavaScript库进行Web前端开发的程序员来说,这是一个极其宝贵的资源。Ext2.x API提供了丰富的组件和功能,帮助开发者构建交互性强、用户体验良好的...

    Ext.ux.touch.grid-master.rar

    Ext.ux.touch.grid-master 提供了触摸优化的滚动、筛选、排序、分页等功能,同时支持自定义列渲染和行为,使开发者可以创建出高度定制化的数据展示界面。 此压缩包中可能包含以下内容: 1. `README` 文件:通常包含...

    ext.net 1.x DEMO

    在开发过程中,为了使用 EXT.NET 1.x 的功能,你需要在项目中引用对应的 DLL 文件(Ext.Net.dll)和 XML 文档(Ext.Net.xml)。DLL 文件包含了所有组件和类的实现,而 XML 文档则包含了这些组件的元数据,用于代码...

    Ext 3.x 文件批量上传

    在本文中,我们将深入探讨如何在Ext 3.x框架中实现文件的批量上传功能。Ext 3.x是一款强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件和强大的数据管理功能,非常适合创建复杂的Web界面,包括...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...

    ext3.x和2.x上传文件例子upolad

    本文将深入探讨"ext3.x和2.x上传文件例子upolad"这一主题,结合使用`commons-fileupload-1.2.jar`库进行多文件上传的操作。 首先,`ext3.x`和`ext2.x`是指Linux文件系统的两个版本。`ext3`是`ext2`的扩展,引入了...

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    Ext_Js分页显示案例详解

    ### Ext_Js分页显示案例详解 #### 一、引言 在Web开发领域,Ext_Js(简称ExtJS)是一种强大的JavaScript库,用于构建复杂的客户端应用。它提供了一套丰富的UI组件,使得开发者能够轻松地创建美观且功能强大的用户...

    EXT2.X API 半中文纯HTML版 无需ARI

    EXT2.X API 是一个用于开发Web应用程序的JavaScript库,它为构建富互联网应用程序(Rich Internet Applications,RIA)提供了丰富的组件和功能。这个API是半中文纯HTML版本,意味着它的文档和部分源代码是以中文编写...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    ext grid json分页显示

    分页是EXT Grid的重要特性之一,它可以有效地管理大量数据,避免一次性加载所有数据导致的性能问题。EXT Grid通常与服务器进行异步通信(即Ajax技术)来实现分页。Ajax允许Web应用在不刷新整个页面的情况下更新部分...

    spketdwcs-ext-2.1.mxp

    spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...

Global site tag (gtag.js) - Google Analytics