extjs 4.0 作的 Excel 小功能
日期：2014-05-16 浏览次数：20432 次
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);
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(),
});
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
