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

extjs 4.0 做的 Excel 小功能

阅读更多

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

 

题目如下

 

实现一可编辑的表格,表格布局类似Excel,行号用数字表示,列号用26进制字母组合表示,支持单元格间简单公式计算,如在A1单元格输入1A2输入2A3输入=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
这个你做出来了哦。可不可以给我参考下。。有个完整的工程么。。拜托啦。

相关推荐

    ExtJs4.0官方版本

    综上所述,ExtJS 4.0官方版本是构建复杂企业级Web应用的理想选择,它提供的强大功能和易用性,使得开发者能够快速地构建出功能丰富、交互性强的前端界面。在ext-4.0.0这个压缩包中,包含了完整的框架文件和资源,...

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    extJs4.0 开发手册源码

    这个"EXTJS4.0开发手册源码"包含了EXTJS4.0框架的源代码,以及与其配套的开发指南,是深入理解EXTJS4.0内部机制和进行实际项目开发的重要参考资料。 EXTJS4.0的核心特性包括组件化开发、数据绑定、可扩展性、丰富的...

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    ExtJs4.0 手册中文版

    `extjs4.0_中文.doc`可能包含ExtJS 4.0的特定技术点或实例解析,如布局管理、图表功能或者动画效果的实现。这份文档可能会帮助开发者更好地理解和应用ExtJS 4.0中的高级特性。 《ExtJS入门教程(超级详细).pdf》则是...

    EXTJS4.0视频教程配套代码

    第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS4.0的新特性.002.zip (50.00M)[02]EXTJS4.0的新特性.001.zip 第三讲:extjs4.0...

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 ...综上所述,EXTJS 4.0不仅具备强大的功能和丰富的组件库,还拥有活跃的开发者社区和完善的文档支持。对于希望快速构建高质量Web应用的开发者来说,深入学习和掌握EXTJS是非常有益的。

    EXTjs4.0学习文档

    EXTJS 4.0 提供了丰富的、非常漂亮的外观体验,成为众多界面层开发人员的追捧,更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能,在统计方面做的也非常出色。 在 4.0 版本中,EXTJS ...

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    extjs4.0技术

    **Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础操作是非常重要的。 ##### 获取Extjs4.0 - **官方网站**:...

    ExtJS4.0中文API(chm版和网页版)

    ExtJS4.0中文API chm版:包括ExtJS4,js,jquery 网页版:全面的详细的ExtJS4.0 api

    EXTJS4.0视频教程配套代码包含action类

    总的来说,EXTJS4.0的action类是实现客户端和服务器通信的核心工具,学习这部分内容对于开发功能丰富的Web应用至关重要。通过这个视频教程配套代码,你不仅可以巩固EXTJS的基础知识,还能学习到如何解决实际开发中...

    Extjs4.0基础学习指南

    一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载

    Extjs4.0中文学习手册、入门详解

    ExtJS 4.0 是一个基于 JavaScript 的 Rich Internet Application(RIA)框架,提供了许多强大的功能,包括 UI 组件、数据绑定、事件处理等。 ExtJS 4.0 可以帮助开发者快速构建复杂的 Web 应用程序。 2. 环境搭建 ...

    extjs 4.0 extjs

    标题提到的是ExtJS的4.0版本,这是一个重要的里程碑,因为它引入了许多新功能和改进,与之前的2.0和3.0版本有显著区别。 在ExtJS 4.0中,最显著的变化之一是其模型-视图-控制器(MVC)架构的增强。这个版本提供了更...

    Extjs 4.0发布啦

    最新Extjs4.0 所有文件,含案例,帮助文档,源代码

    Extjs4.0开发包

    这个“Extjs4.0开发包”包含了开发人员需要的所有资源,包括库文件、示例和API文档,以便于理解和使用ExtJS 4.0。 首先,让我们深入了解ExtJS的核心概念。ExtJS基于MVC(Model-View-Controller)架构模式,这是一种...

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术,并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的,提供...

Global site tag (gtag.js) - Google Analytics