extjs 4.0 做的 Excel 小功能
公司出的 三级程序程序员试题
?
题目如下
?
实现一可编辑的表格，表格布局类似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);elsestr.push('');}index++;excelArr.push(str);}var tempStor = new Array(); //作store fieldsfor(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 columnsgridData.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(), });});