EXT GRID 动态表头 例子

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Object username=session.getAttribute("username");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>附件管理</title>
    <script type="text/javascript" src="<%=basePath %>js/jquery-1.11.0.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath %>ext-3.4.0/adapter/ext/ext-base.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=basePath %>ext-3.4.0/ext-all.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=basePath %>ext-3.4.0/src/locale/ext-lang-zh_CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=basePath %>ext-3.4.0/examples/ux/ProgressBarPager.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=basePath %>ext-3.4.0/examples/ux/fileuploadfield/FileUploadField.js" charset="utf-8"></script>
	<link rel="stylesheet" href="<%=basePath %>ext-3.4.0/resources/css/ext-all.css" type="text/css"></link>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

  </head>

  <body>
  </body>

<script type="text/javascript">
	var user_name='<%=username %>';
	var htmldata = "";
	var defultHtmlData = "";
	var defultData = [];
	var defultQueryHtml = "";
	var autoloadcontrol;
	var idList = "";
	var nowCm;
	var store;
	var store1;
	var selectedTableName = "";
	var selectedUpTableName = "";
	var selectedTypeList = "";
	var selectedUpTypeList = "";
	var upIdList = "";
	var upValueList = "";
	var fields = [];
	var rdItems = [];
    var rdConfig = {};
    var grids;
  	var curWwwPath=window.document.location.href;
	var pathName=window.document.location.pathname;
	var pos=curWwwPath.indexOf(pathName);
	var localhostPaht=curWwwPath.substring(0,pos);
	var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
	var baseUrl = localhostPaht + projectName;
	var viewFile;

	var page_size = 15;//查询列表每一页显示数据条数
	var maxSize="20971520";//附件上传大小限制 1M=1048576字节
	var allowUploadFile =["jpg","gif","png","bmp","jpeg","pdf","doc","docx","xls","xlsx","ppt","ceb","txt"]; //允许上传的文件类型

	var link = {
	getTreeData : baseUrl + "/pages/fm_getTreeData.do",
	formQuery : baseUrl + "/pages/fm_formQuery.do",
	getformQueryData : baseUrl + "/pages/fm_getConditionData.do",
	getFileList : baseUrl + "/pages/fm_getFileList.do",
	getDefultData : baseUrl + "/pages/fm_getDefultData.do",
	getAllDataRead : baseUrl + "/pages/fm_getAllDataRead.do",
	delFile : baseUrl + "/pages/fm_delFile.do",
	getOffice2HtmlPath : baseUrl + "/pages/fm_getOffice2HtmlPath.do",
	uploadFile : baseUrl + "/pages/up_upload.do"
	};

	 	function getDefultData(){//打开页面时,获得全局条件
			$.ajax({
	     	     type:"POST",
	     	     url: link.getDefultData,
	     	     success:function(data){
	     	    	 if(data[0].name=="err"){
		     	    	 try{
		     	    	 	Ext.getCmp("toppanel").body.update("<form name=\"queryform\" id=\"queryform\" action=\""+link.formQuery+"\" method=\"post\"></form>");
		     	    	 }catch(e){
		     	    	 }
	     	    		return;
	     	    	 }
	     	    	 defultData = [];
	     	    	 for(var i=0;i<data.length;i++){
	     	    	 	defultData.push(data[i]);
	     	    	 }
	     	    	 setDefultQueryHtml(data);//设置显示全局条件
	     	     },
	     	     dataType:"json"
	  	});
	}

	function setDefultQueryHtml(data){//打开页面时 显示全局条件
		defultQueryHtml = "";
			for(var i=0;i<data.length;i++){
				defultQueryHtml += "<div class=\"formdiv\"><div class=\"textdiv\">"+data[i].name+":</div>";
				defultQueryHtml += "<input name=\""+data[i].enname+"\" id=\""+data[i].enname+"\" text=\""+data[i].name+"\" class=\"valuediv\" type=\"text\"/></div>"
			}
			defultHtmlData = "<form name=\"queryform\" id=\"queryform\" action=\""+link.formQuery+"\" method=\"post\">"+defultQueryHtml+"</form>";
			Ext.getCmp("toppanel").body.update(defultHtmlData);
	}

	function delFile(){
		    var guid = grids.getSelectionModel().getSelected().get("guid");
		    var fileType = grids.getSelectionModel().getSelected().get("type");
		    var delFileName = grids.getSelectionModel().getSelected().get("filename");
		    if(confirm("确认删除 " + delFileName +" 吗?")){
	        	$.ajax({
	          	     type: 'POST',
	          	     url: link.delFile,
	          	     data:{guid:guid,type:fileType,table:selectedTableName},
	          	     success:function(data){
	          		 if(data=="true"){
	          		     grids.getStore().remove(grids.getSelectionModel().getSelected());
	          		     alert("删除成功");
	          		 }else{
	          		     alert("删除失败");
	          		 	}
	          	     },
	          	     dataType:"text"
	       	});
		    }
		}

Ext.onReady(function(){

	Ext.QuickTips.init();

	Ext.form.Field.prototype.msgTarget = "side";

		viewFile =function(){
			var guid = grids.getSelectionModel().getSelected().get("guid");
		    var fileType = grids.getSelectionModel().getSelected().get("type");
		    var FileName = grids.getSelectionModel().getSelected().get("filename");
		    var htmlPath = "";
		    var t = "";
		    if(fileType=="JPG"||fileType=="PNG"||fileType=="JPEG"||fileType=="GIF"||fileType=="BMP"){
				t = 1;//图片格式
				openViewWin(FileName,fileType,guid,t,htmlPath);
			}else if(fileType=="TXT"){
				t = 2;//文本格式
				openViewWin(FileName,fileType,guid,t,htmlPath);
			}else if(fileType=="PDF"){
				t = 4;//PDF格式
				openViewWin(FileName,fileType,guid,t,htmlPath);
			}else if(fileType=="DOC"||fileType=="DOCX"||fileType=="XLS"||fileType=="XLSX"){
				t = 3//word,excel格式
				viewMask.show()
				$.ajax({
		     	     type:"POST",
		     	     url: link.getOffice2HtmlPath,
		     	     data:{type:fileType,guid:guid},
		     	     success:function(data){
		     	     	if(data=="err"){
		     	     		alert("预览失败")
		     	     		viewMask.hide();
		     	     		return;
		     	     	}else{
		     	     		viewMask.hide()
		     	     		htmlPath = data;
		     	     		openViewWin(FileName,fileType,guid,t,htmlPath);
		     	     	}
		     	     },
		     	     dataType:"text"
		  	});
			}else{
				alert("此格式不支持在线浏览")
				return;
			}
		}

		 var viewMask = new Ext.LoadMask(Ext.getBody(),{
              msg:"正在打开文件请稍后...",
              removeMask:true
          }); 

		function openViewWin(FileName,fileType,guid,t,htmlPath){
			var awidth = document.body.clientWidth-65;
			var aheight = document.body.clientHeight-115;
			var filePath = baseUrl+"/AffixFiles/FileManager/"+guid+"."+fileType;
			var hd;
			if(t=="1"){//图片格式
				hd = "<img src="+filePath+">";
			}else if(t=="2"){//文本格式
				hd = "<iframe src="+filePath+" name=iframe1 width="+awidth+" height="+aheight+"></iframe>";
			}else if(t=="3"){//word
				hd = "<iframe src="+htmlPath+" name=iframe1 width="+awidth+" height="+aheight+"></iframe>";
			}else if(t=="4"){//PDF
				hd = "<iframe src="+filePath+" name=iframe1 width="+awidth+" height="+aheight+"></iframe>";
			}
			var viewPanel = new Ext.Panel({
			id:"viewPanel",
            border:true,
            autoScroll:true,
            layout:"anchor",
            width:document.body.clientWidth-45,
            height:document.body.clientHeight-95,
            frame:true,
            html:hd
      })

			var viewWin = new Ext.Window({
			 		title :"文件预览:  "+FileName+"."+fileType.toLowerCase(),
				    id : 'viewWin',
				    border : false,
				    draggable:false,
			    	resizable:false,
				    width : document.body.clientWidth-30,
				    height : document.body.clientHeight-30,
				    plain : true,
				    modal : true,
				    buttonAlign:'center',
				    items:[viewPanel],
				     buttons:[{
			     	text: '关闭',
                    handler: function(){
                    	viewWin.close()
                    }}]
				    })
					viewWin.show()
		}

		function selectUptree(){
			try{
				var path = mytree.getSelectionModel().getSelectedNode().getPath();
				Ext.getCmp("mytree1").selectPath(path);
				var node = Ext.getCmp("mytree1").getSelectionModel().getSelectedNode();
				if(node.attributes.text!="附件分类"){
					getUpFatherNodeList(node);
					autoloadcontrol.body.update("");
					setUploadForm(node.attributes.id);
				}
			}catch(e){
				return;
			}
		}

		<span style="color:#ff0000;">function dt(){//根据所选分类刷新列表表头
			var idListArr = idList.split("|");
			var cmItems = [];
 			var cmConfig = {};
 			cmItems.push(new Ext.grid.RowNumberer());
 			cmItems.push({id:'id', header: "id", width: 100,hidden:true, hideable:false,sortable: false, dataIndex: 'id',renderer:tips});
 			cmItems.push({id:'filename', header: "附件名称", width: 200, sortable: false, dataIndex: 'filename',renderer:tips});
				try{
					var form=document.getElementById("queryform");
					for(var i=0;i<form.length;i++){
						if (form[i].type == "text"){
							var cmConfig = {id:form[i].name,header:form[i].text,width:100,sortable:false,dataIndex:form[i].name,renderer:tips};
							cmItems.push(cmConfig);
						}
					}
				}catch(e){
				}
			cmItems.push({id:'type', header: "附件类型", width: 50, sortable: false, dataIndex: 'type',renderer:tips});
			cmItems.push({id:'filepath', header: "文件路径", width: 0,hidden:true, sortable: false,hideable:false, dataIndex: 'filepath',renderer:tips});
			cmItems.push({id:'guid', header: "guid", width: 0,hidden:true, sortable: false,hideable:false, dataIndex: 'guid',renderer:tips});
			cmItems.push({id:'types', header: "types", width: 0,hidden:true, sortable: false,hideable:false, dataIndex: 'types',renderer:tips});
			cmItems.push(time);
			cmItems.push(cz);
			sm = new Ext.grid.ColumnModel(cmItems);
			grids.reconfigure(store,sm);
		}</span>

		function setUpData(){//获得上传时form表单中的控件ID与填写内容
		upIdList = "";
		upValueList = "";
		var form = Ext.getCmp("fp").getForm();
			for(var i=0;i<form.items.items.length;i++){
				if (form.items.items[i].id != "form-file"){
					upIdList += form.items.items[i].name+"|";
					if(form.items.items[i].getValue().trim()==""){
						upValueList += "empty|";//内容为空时添加empty
					}else{
						upValueList += form.items.items[i].getValue()+"|"
					}
				}
			}
			upIdList = upIdList.substring(0, upIdList.length-1);
			upValueList = upValueList.substring(0, upValueList.length-1);
	}

	function checkUploadFile(path){//检查上传文件后缀
	    var type = path.substring(path.lastIndexOf(".")+1,path.length);
	    return contains(allowUploadFile, type);
	}

	function contains(arr, obj) {
	    var i = arr.length;
	    while (i--){
	       if(arr[i]===obj){
	            return true;
	       }
	    }
	    return false;
	}

	function getIsAllCondition(){//上传时获得全局条件
		if(defultData.length>0){
			for(var i=0;i<defultData.length;i++){
				var obj = "new Ext.form.TextField({fieldLabel:\""+defultData[i].name+"\",name:\""+defultData[i].enname+"\",id:\""+defultData[i].enname+"\",emptyText:\"请输入内容\",width:\"300\",labelStyle:\"text-align:right;\"})";
				autoloadcontrol1.add(eval(obj))
				}
			autoloadcontrol1.body.update("");
			autoloadcontrol1.doLayout();
		}
	}

 	function getQueryForm(id){//查询前根据选择树节点ID获得相应的自定义查询条件
			$.ajax({
	     	     type:"POST",
	     	     url: link.getformQueryData,
	     	     data:{id:id},
	     	     success:function(data){
	     	    	 if(data[0].name=="err"){
	     	    	 	Ext.getCmp("toppanel").body.update("<form name=\"queryform\" id=\"queryform\" action=\""+link.formQuery+"\" method=\"post\"></form>");
	     	    		data = "";
	     	    		return;
	     	    	 }
	     	    	 setQueryData(data);//设置查询条件
	     	     },
	     	     dataType:"json"
	  	});
	}

	 	function setUploadForm(id){//上传前根据选择树节点ID获得相应的自定义查询条件
			$.ajax({
	     	     type:"POST",
	     	     url: link.getformQueryData,
	     	     data:{id:id},
	     	     success:function(data){
	     	    	 if(data[0].name=="err"){
	     	    	 	autoloadcontrol.body.update("无");
	     	    		return;
	     	    	 }
	     	    	setUploadFormData(data);//设置查询条件
	     	     },
	     	     dataType:"json"
	  	});
	}

	function setUploadFormData(data){//设置自定义查询条件
		for(var i=0;i<data.length;i++){
			var obj = "new Ext.form.TextField({xtype:\"TextField\",fieldLabel:\""+data[i].name+"\",name:\""+data[i].enname+"\",id:\""+data[i].enname+"\",emptyText:\"请输入内容\",width:\"300\",labelStyle:\"text-align:right;\"})";
			autoloadcontrol.add(eval(obj))
		}
		autoloadcontrol.doLayout();
	}

	function query(){
		dt();//设置列表表头信息
		getQueryList();//获取查询列表的ID信息
		var valueList = getValueList();//获取查询列表所填写的value
		grids.getStore().removeAll();
		grids.getStore().load({params:{start:0,limit:page_size,table:selectedTableName,types:selectedTypeList,valueList:valueList,idList:idList}});
	}

	function reSetForm(){//重置查询信息
		var form=document.getElementById("queryform");
			for(var i=0;i<form.length;i++){
				if (form[i].type == "text"){
					form[i].value="";
				}
			}
	}

	//获取表单上填写的自定义查询条件值数组
	function getValueList(){
		var arr=[];
		var form=document.getElementById("queryform");
			for(var i=0;i<form.length;i++){
				if (form[i].type == "text"){
					if(form[i].value!=""){
						arr.push(form[i].value);
					}else{
						arr.push("empty");
					}
				}
			}
		return arr.join("|");
	}

	//获取自定义查询条件ID列表数组
	function getQueryList(){
		idList = "";
		var form=document.getElementById("queryform");
		for(var i=0;i<form.length;i++){
			if (form[i].type == "text"){
				idList += form[i].id+"|";
			}
		}
		idList = idList.substring(0, idList.length-1);
	}

	function setQueryData(data){
		htmldata = "<form name=\"queryform\" id=\"queryform\" action=\""+link.formQuery+"\" method=\"post\">"+defultQueryHtml;
			for(var i=0;i<data.length;i++){
				htmldata += "<div class=\"formdiv\"><div class=\"textdiv\">"+data[i].name+":</div><input name=\""+data[i].enname+"\" id=\""+data[i].enname+"\" text=\""+data[i].name+"\" class=\"valuediv\" type=\"text\"/></div>";
			}
			htmldata += "</form>";
			Ext.getCmp("toppanel").body.update(htmldata);
	}

	 function getFatherNodeList(node){//查询页面点击树时获得查询需要的selectedTypeList及设置title信息
   		Ext.getCmp("leftpanel").setTitle("文件分类: 所有");
   		var selectedNodeName;
   		selectedTableName = "";
   		if(node.attributes.level=="0"){
   			selectedTableName = node.attributes.tablename;
   			selectedNodeName = node.attributes.text;
   			selectedTypeList = "|"+node.attributes.id+"|";
   		}else if(node.attributes.level=="1"){
   			var fNode = node.parentNode;
   			selectedTableName = fNode.attributes.tablename;
   			selectedNodeName = fNode.text+">"+node.text;
   			selectedTypeList = "|"+fNode.attributes.id+"|"+node.attributes.id+"|";
   		}else if(node.attributes.level=="2"){
   			var fNode = node.parentNode;
   			selectedTableName = fNode.parentNode.attributes.tablename;
   			selectedNodeName = fNode.parentNode.text+">"+fNode.text+">"+node.text;
   			selectedTypeList = "|"+fNode.parentNode.attributes.id+"|"+fNode.attributes.id+"|"+node.attributes.id+"|";
   		}
   		Ext.getCmp("leftpanel").setTitle("文件分类: "+selectedNodeName);
   }

      function getUpFatherNodeList(node){//上传页面点击树时获得查询需要的selectedTypeList及设置title信息
   		Ext.getCmp("addWin").setTitle("附件上传");
   		selectedUpTableName = "";
   		var selectedNodeName;
   		if(node.attributes.level=="0"){
   			selectedUpTableName = node.attributes.tablename;
   			selectedNodeName = node.attributes.text;
   			selectedUpTypeList = "|"+node.attributes.id+"|";
   		}else if(node.attributes.level=="1"){
   			var fNode = node.parentNode;
   			selectedUpTableName = fNode.attributes.tablename;
   			selectedNodeName = fNode.text+">"+node.text;
   			selectedUpTypeList = "|"+fNode.attributes.id+"|"+node.attributes.id+"|";
   		}else if(node.attributes.level=="2"){
   			var fNode = node.parentNode;
   			selectedUpTableName = fNode.parentNode.attributes.tablename;
   			selectedNodeName = fNode.parentNode.text+">"+fNode.text+">"+node.text;
   			selectedUpTypeList = "|"+fNode.parentNode.attributes.id+"|"+fNode.attributes.id+"|"+node.attributes.id+"|";
   		}
   		Ext.getCmp("addWin").setTitle("附件上传:"+selectedNodeName);
   }

		function tips(value, meta, rec, rowIdx, colIdx, ds){//列表提示
		        var title = "tip:";
	       		meta.attr =  " ext:qtitle = '"+title+"', ext:qtip = '"+value+"'";
	       	    return value;
		}

		var time = {
				id:'time',
				header: "上传时间",
				width: 120,
				sortable: false,
				dataIndex: 'time',
				renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
					var time = value.substring(0,value.length-2);
					return time;
					}
				}

		var rowIndex;
		var czText ="<a href=\"javascript:;\" onclick=\"javascript:viewFile()\">查看附件</a> <a href=\"javascript:;\" onclick=\"javascript:delFile()\">删除附件</a>";
		var cz = {
				id:'cz',
				header: "操作",
				width: 90,
				sortable: false,
				dataIndex: 'cz',
				renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
	            var returnStr = czText
	            return returnStr
	          }
		}	

	var treeload = new Ext.tree.TreeLoader({
	              dataUrl : link.getTreeData
	            })

	var mytree=new Ext.tree.TreePanel({
	       animate:true,
	       title:"当前用户:"+user_name,
	       rootVisible:true,
	       autoScroll:true,
	       lines:true,
	       border:false,
	       loader:treeload,
	       root:new Ext.tree.AsyncTreeNode({
					id:"root",
					text:"附件分类",
					draggable:false,
					expanded:true
				}),
		   listeners:{"click":function(node,e){
		   			if(node.attributes.text=="附件分类"){
		   				selectedTableName = "";
		   				selectedTypeList = "";
		   				getDefultData();
		   				Ext.getCmp("leftpanel").setTitle("文件分类: 所有");
		   				return;
		   			}
		   			getFatherNodeList(node);
		   			if(node.attributes.level=="2"){
		   				getQueryForm(node.attributes.id);
		   			}else{
		   				getDefultData();
		   			}
		   		}
		   }
	   });

	function init(){//<span style="color:#ff0000;">初始化view及获得附件表中的所有字段 并添加到fields</span>

 	 	Ext.Ajax.request({
            url: link.getAllDataRead,
            async: false,
            success : function(data) {<span style="color:#ff0000;">//查询出需要添加到fields的字段信息</span>
<span style="color:#ff0000;">                var mynamefield = {};
                var d = eval(data.responseText);
      	     	for(var i=0;i<d.length;i++){
     	     		mynamefield = {name:d[i].name.toLowerCase()}
     	     		fields.push(mynamefield);
     	     	}
     	     	setFields(fields)</span>
            },
            failure : function(request) {
                Ext.MessageBox.show({
                    title : '操作提示',
                    msg : "获取附件表字段失败,请检查!",
                    buttons : Ext.MessageBox.OK,
                    icon : Ext.MessageBox.ERROR
                });
            },
            method : 'get'
        });
}

function setFields(<span style="color:#ff0000;">fields</span>){

		store = new Ext.data.Store({
		autoLoad:false,
		proxy : new Ext.data.HttpProxy({
			 type: "ajax",
			 method: 'POST',
		     url : link.getFileList
		    }),
		reader : new Ext.data.JsonReader({
		fields:<span style="color:#ff0000;">fields</span>,
		root : "root",
		totalProperty : "total"
		})
		});
	store.on("beforeload",function(){
		store.baseParams={};
});

	var cm = [
	   		new Ext.grid.RowNumberer(),
	   		{id:'id', header: "id", width: 0,hidden:true, sortable: false,hideable:false, dataIndex: 'id',renderer:tips},
	        {id:'filename', header: "附件名称", width: 260, sortable: false, hideable:false,dataIndex: 'filename',renderer:tips},
	        {id:'type', header: "附件类型", width: 50, sortable: false, dataIndex: 'type',renderer:tips},
	        {id:'guid', header: "guid", width: 0,hidden:true,hideable:false, sortable: false, dataIndex: 'guid',renderer:tips},
	        {id:'types', header: "types", width: 0,hidden:true, hideable:false,sortable: false, dataIndex: 'types',renderer:tips},
	        {id:'time', header: "上传时间", width: 120, sortable: false, dataIndex: 'time',
	            renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
	            var time = value.substring(0,value.length-2)
	            return time;
	          }
	        },
	        {id:'cz', header: "操作", width: 90, sortable: false, dataIndex: 'cz',
	            renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
	            var returnStr = "<a href=\"javascript:;\" onclick=\"javascript:viewFile()\">查看附件</a> <a href=\"javascript:;\" onclick=\"javascript:delFile()\">删除附件</a>";
	            return returnStr;
	          }}
	        ]

	 grids = new Ext.grid.GridPanel({
	    store:store,
	    xtype: "grid",
	    loadMask:true,
	    anchor:"100% 100%",
	    columnLines: true,
	    autoWidth: true,
	    viewConfig: {
		        forceFit: true,
		        border:false,
		        stripeRows: true},
	    sortableColumns:false,
	    bbar : new Ext.PagingToolbar({
		    pageSize : page_size,
		    store : store,
		    displayMsg:'当前显示 {0} - {1} 条记录 共 {2} 条记录',
		    emptyMsg:"无记录",
		    displayInfo : true
		   }),
	    columns:cm,
	    listeners : {
            beforerender : function(cp) {
            }
        }
	});

	  var toppanel = new Ext.Panel({
        id:"toppanel",
        border: false,
        collapsible: false,
        anchor:"100% 100%",
        html:""
    }); 

	  var leftpanel = new Ext.Panel({
	  	title:"选择分类",
        border: false,
        id:"leftpanel",
        collapsible: false,
        layout:"anchor",
        items:[{
        		border:false,
        		anchor:"100% 25%",
        		autoScroll:true,
        		items:[toppanel],
        		buttonAlign:"right",
        		bbar:[{
                    text: '上传附件材料',
                    iconCls: 'icon-upload',
                    handler:function(){
                    uploadWin();
                    }
                    },'->',{
                    text: '重置',
                    iconCls: 'icon-upload-reset',
                    handler:function(){
                    	reSetForm();
                    }
                    },
        		'->',{
                    text: '查询',
                    iconCls: 'icon-query',
                    handler:function(){
                    	query();
                    }
                    }]
        		},{
        		border:false,
        		id:"gp",
        		layout:"anchor",
        		anchor:"100% 75%",
        		items:[grids]
        		}
        	  ]
    });

		new Ext.Viewport({
	    layout:"border",
	    items: [
                { region: "west", width:200,autoScroll:true, collapsible: false,items:[mytree],layout:"fit",border:true},
                { region: "center", id:'center',width:400,collapsible: false,items:[leftpanel],layout:"fit",border:true }
	    ]
        });

        getDefultData();//表单打开时设置默认条件
        grids.getStore().load({params:{start:0,limit:page_size}});
        dt();//设置列表表头信息

}

 	function uploadWin(){//上传文件窗口

	var treeload1 = new Ext.tree.TreeLoader({
              dataUrl : link.getTreeData
            })

	var mytree1=new Ext.tree.TreePanel({
	   anchor:"100% 100%",
       animate:true,
       id:"mytree1",
       rootVisible:true,
       autoScroll:true,
       lines:true,
       border:false,
       loader:treeload1,
       root:new Ext.tree.AsyncTreeNode({
				id:"root",
				text:"附件分类",
				draggable:false,
				expanded:true
			}),
	   listeners:{"click":function(node,e){
	   			autoloadcontrol.removeAll();
	   			autoloadcontrol.doLayout();
	   			autoloadcontrol.body.update("无");
	   			if(node.attributes.text=="附件分类"){
	   				Ext.getCmp("addWin").setTitle("附件上传");
	   				return;
	   			}else if(node.attributes.level=="2"){
	   				autoloadcontrol.body.update("");
	   				setUploadForm(node.attributes.id);
	   			}
	   			getUpFatherNodeList(node);
	   		}

	   }
   });
   	  treeload1.on("load",function(node,response){
   	  	selectUptree();
   	  })
   	  ;

      autoloadcontrol = new Ext.form.FieldSet({
               layout: "form",
               html:"无",
               title: "自定义条件"
           })

     autoloadcontrol1 = new Ext.form.FieldSet({
               layout: "form",
               html:"无",
               title: "全局条件"
           })
    autoloadcontrol2 = new Ext.form.FieldSet({
               title: "文件上传",
               items:[{xtype:"fileuploadfield",
	            	labelStyle:"text-align:right",
	                id: "form-file",
	                width:"300",
	                emptyText:"请选择上传的文件",
	                fieldLabel:"文件路径",
	                name:"file",
	                buttonText:"选择文件",
	                buttonCfg:{
	                    iconCls:'icon-selectfile'
	                }}]
           })

		var fp = new Ext.FormPanel({
			id:"fp",
            fileUpload:true,
            autoScroll:true,
            anchor:"100% 100%",
            border:false,
            enctype:"multipart/form-data",
            bodyStyle:"padding: 10px 10px 0 10px;",
            labelWidth:"60",
            defaults: {
                anchor:"95%",
                msgTarget:"side"
            },
            items:[//autoloadcontrol1,全局条件
	               autoloadcontrol,
	               autoloadcontrol2
                ]

 		})

 	 	var addWin = new Ext.Window({
		    title : "附件上传",
		    id : 'addWin',
		    border : false,
		    width : 730,
		    height : 410,
		    labelWidth:80,
		    closeAction:'close',
		    plain : true,
		    modal : true,
		    autoScroll:true,
		    buttonAlign:'center',
		    constrain : true,
		    layout:"border",
			items: [{
				    region:"west",
				    autoScroll:true,
				    margins: "5 0 0 0",
				    cmargins: "5 5 0 0",
				    width: "200",
				    minSize: "100",
				    maxSize: "250",
				    layout:"anchor",
				    items:[mytree1]
				},{
				    collapsible: false,
				    region:"center",
				    margins: "5 0 0 0",
				    autoScroll:true,
				    items:[fp]
				}],
			buttons: [{
                    text: "上传",
                    iconCls:"icon-uploadfile",
                    handler: function(){
                    	if(Ext.getCmp("form-file").getValue().trim()==""){
                    		alert("请选择需要上传的文件");
                    		return;
                    	}
                        if (fp.getForm().isValid()){
                            var allow = checkUploadFile(Ext.getCmp("form-file").getValue());
                            if(!allow){
                        	alert("无法上传此文件类型的文件");
                        	return;
                        	}
                        if(selectedUpTableName==""){
                        	alert("请选择文件分类");
                        	return;
                        }
                        	setUpData();//获取上传时填写的内容
                          fp.getForm().submit({
                                url:link.uploadFile+"?maxSize="+maxSize+"&upIdList="+upIdList+"&upValueList="+upValueList+"&types="+selectedUpTypeList+"&table="+selectedUpTableName,
                                waitTitle:"请稍候",
                                waitMsg:"正在上传...",
                                success:function(fp,o){
                                	if(o.result.message=="success"){
                                		Ext.Msg.alert("提示消息","上传成功");
                                	}else if(o.result.message=="error001"){
                                		Ext.Msg.alert("错误","数据库插入数据失败");
                                	}else if(o.result.message=="error002"||o.result.message=="error003"){
                                		Ext.Msg.alert("错误","文件上传失败");
                                	}else if(o.result.message=="error004"){
                                		Ext.Msg.alert("错误","文件大小超出");
                                	}
                                }
                            });
                        }
                    }
                },{
                    text: '重置',
                    iconCls:'icon-upload-reset',
                    handler:function(){
                        fp.getForm().reset();
                    }
					}]
		});
 		addWin.show();
 		//getIsAllCondition();//打开上传界面时获得全局条件
 	}

		init();//初始化表单
		getDefultData();
});

</script>

  <style>
  .formdiv{
	margin: 12px 0 0 20px;
	/* border:1px solid; */
	width:31%;
	height:20px;
	float:left;
}
.textdiv{
	/* border:1px solid; */
	width:35%;
	height:100%;
	float:left;
}
.valuediv{
	/* border:1px solid; */
	width:65%;
	height:100%;
	float:left;
}
.icon-upload {
background: url('<%=basePath %>ext-3.4.0/icon/server_add.png') no-repeat 0 0 !important;
}
.icon-query {
background: url('<%=basePath %>ext-3.4.0/icon/zoom.png') no-repeat 0 0 !important;
}
.icon-selectfile {
background: url('<%=basePath %>ext-3.4.0/icon/image_add.png') no-repeat 0 0 !important;
}
.icon-uploadfile {
background: url('<%=basePath %>ext-3.4.0/icon/disk.png') no-repeat 0 0 !important;
}
.icon-upload-reset {
background: url('<%=basePath %>ext-3.4.0/icon/cog.png') no-repeat 0 0 !important;
}
.upload-icon {
background: url('images/image_add.png') no-repeat 0 0 !important;
}
.x-form-file-wrap {
position: relative;
height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
right: 0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
right: 0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
position: absolute;
left: 0;
z-index: 3;
color: #777;
}
a:link {
 font-size: 11px;
 color: blue;
 text-decoration: none;
}
a:visited {
 font-size: 11px;
 color: blue;
 text-decoration: none;
}
a:hover {
 font-size: 11px;
 color: blue;
}

  </style>

</html>

时间: 2024-10-06 20:29:35

EXT GRID 动态表头 例子的相关文章

Ext3.0中复杂表头例子

注意要点:不出现滚动条时要设置height和forceFit : false 效果如下图: this.columns = [{ header : '月份', dataIndex : '月份', width:50 }]; this.store = new Ext.data.SimpleStore({ fields : [], data : [[]] }); var cc = new Ext.FormPanel({ frame : false, border : false, items : [{

Ext.grid.GridPanel属性及方法等

1.Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0stripeRows:表格是否隔行换色,默认为falsecm.colModel:表格的列模式,渲染表格时必须设置该配置项sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModelenableHdMenu:是否显示表头的上

[转]Ext.grid常用属性和方法

原文地址:http://blog.csdn.net/fm19901229/article/details/8113969 1.Ext.grid.GridPanel  主要配置项:  store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 

再谈extjs4.1中gridpanel动态表头动态列

之前写过一篇gridpanel有关动态列的博客,当时只是实验性的写写,实际项目中也没有用,因为是实验性的写,所以对实际项目考虑的问题不是很多,比如,如果是动态列,数据也是动态的,而且可能不固定,这些具体的问题,只有在实际开发后,才会明白,这次正好顺利开发完gridpanel的动态列,总结一下过程,为遇到同样问题的同学提供一个思路. 因为是实际开发项目,具体的代码比较多,这里只简单说说重点的一些代码,其实这些代码明白后,其他的功能都很好弄.顺便说一下,我后台数据库相关操作用的是c#. 既然是动态列

Ext.grid中的属性以及方法

1.Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0stripeRows:表格是否隔行换色,默认为falsecm.colModel:表格的列模式,渲染表格时必须设置该配置项sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModelenableHdMenu:是否显示表头的上

Ext.grid.plugin.RowExpander的简单用法

有时候,我们在grid里渲染数据时,由于某些字段的内容太长,而grid又不会自动出现滚动条,于是溢出的内容后面就会出现省略号, 导致信息展示不完全.如果,这个信息不太重要,展示不完全也无关紧要.可是,有时候,用户需要查看溢出部分的详细内容时,怎么办呢?比如下图中的grid: 因为信息内容太长,导致“消息内容”展示不全,这时候想要查看详细信息怎么办呢? 最简单的解决方法就是利用 Ext.grid.plugin.RowExpander  我们在grid配置项里面添加一个plugins属性.如下图所示

extjs动态树 动态grid 动态列

由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代码目录表: CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL, TABLENAME VARCHAR2(50 BYTE), ZH_CN VARCHAR2(200 BYTE), ENABLE CHAR(1

Ext.grid.GroupingView 分组显示

1.Ext.grid.GroupingView 主要配置项:            enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true            groupByText:表头菜单中分组控制的菜单文字,默认为'Group By This Field'              enableNoGroups:是否允许用户关闭分组功能,默认为true            showGroupsText:在表头菜单中启用分组和禁用分组的菜单文字,默认为'Sho

[转] Ext Grid (ExtJs)上的单击以及双击事件

例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 }); var alarmGrid = new Ext.grid.GridPanel({ } alarmGrid.addListener('rowdblclick', rowdblclickFn); function rowdblclickFn(grid, rowindex, e){ grid.get