`
junjun16818
  • 浏览: 104000 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs 4.0 做的 Excel 小功能

ExcelEXTCSSFlex正则表达式
阅读更多

公司出的 三级程序程序员试题

 

题目如下

 

实现一可编辑的表格，表格布局类似Excel，行号用数字表示，列号用26进制字母组合表示，支持单元格间简单公式计算，如在A1单元格输入1，A2输入2，A3输入=A1+A2，回车后A3自动计算出3

 

excel.html

只包含了 导入extjs 文件

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<!-- ext -->
		<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" />
    	<link rel="stylesheet" type="text/css" href="ext-4.0/shared/example.css" />
		<link rel="stylesheet" type="text/css" href="ext-4.0/examples/ux/css/CheckHeader.css" />
		
    	<script type="text/javascript" src="ext-4.0/bootstrap.js"></script>
		<script type="text/javascript" src="excel.js"></script>
	</head>
	<body>
	</body>
</html>

 excel.js

 

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext-4.0/examples/ux');

Ext.require([
	'Ext.grid.*',
	'Ext.data.*',
	'Ext.util.*',
	'Ext.state.*',
	'Ext.selection.CellModel',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
])

Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	var excelArr = new Array();     //製作顯示部份
	var index=1;
	for(var i=0;i<26;i++){
		var str = new Array();
		for(var j=0;j<26;j++){
			if(j==0)
				str.push(index);
			else
				str.push('');
		}
		index++;
		excelArr.push(str);
		
	}
	var tempStor = new Array();   //製作store  fields
	for(var i=0;i<27;i++){
		var temp ;
		if(i==0){
			temp = {name: 1,      type: 'float'}
		}
		else{
			temp = {name: (String.fromCharCode(65+i-1)),      type: 'float'}
		}
		
		tempStor.push(temp);
	}

	var store = Ext.create('Ext.data.ArrayStore', { //獲取store
        fields:tempStor ,
        data: excelArr
    });

	var gridData = new Array();   //製作 grid columns
	gridData.push({ text     : 'no',locked:true,sortable : false,width:50,dataIndex: 1});
	for(var i=1;i<27;i++){
		gridData.push({ 
			text     : String.fromCharCode(65+i-1),
			sortable : false,width:50,
			dataIndex: (String.fromCharCode(65+i-1)),
			field: 'textfield',
			
		});
	}
	
	
	var grid = Ext.create('Ext.grid.Panel', {
        store: store,
		autoScroll:true,
		plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
			listeners:{
				'edit':function(editor,e,options){   //监听修改事件
					value = e.value;
					var err = value.match(/^([a-zA-Z]{1})([0-9]{1,3})([+|\-|*|\/]{1})([a-zA-Z]{1})([0-9]{1,3})$/)//使用正则表达式
					if(err!=null){
						var v1 = (grid.getStore().getAt(err[2]-1).get(err[1].toUpperCase())); //获取第一个的值
						var v2 = (grid.getStore().getAt(err[5]-1).get(err[4].toUpperCase())); //获取第二个的值
						
						var result = eval(v1+err[3]+v2);  //计算
						grid.getStore().getAt(e.rowIdx ).set(e.column.text,result);  //添加进表格
					}
					if(value.match(/^[0-9|\-|.]{1,10}$/)==null&&err==null){
						grid.getStore().getAt(e.rowIdx ).set(e.column.text,'0');  //添加进表格
					}
				}
			}
        })
    	],
		columnLines:true,
		flex:1,
        columns: gridData,
        height: 550,
        width: 1200,
        renderTo: Ext.getBody(),
    });
	
	
});
分享到：
| 不看这篇日志也许会节省你十分钟，但是却会 ...
评论
1 楼 testspringmail 2013-11-08  
http://czpae86.iteye.com/blog/1728408
这个你做出来了哦。可不可以给我参考下。。有个完整的工程么。。拜托啦。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics