ExtJS的使用方法汇总(1)——配置和表格控件使用

本文详述了ExtJS的下载配置、表格控件Grid的使用方法及其多种功能,包括列宽自适应、排序、时间数据展示、分页、编辑和属性表格等。通过实例代码展示了如何创建Grid、实现分组和拖放功能,并介绍了与右键菜单的集成,为开发者提供了ExtJS实战指导。
摘要由CSDN通过智能技术生成

ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库,所以非常有学习和使用价值,如果你还没有接触过ExtJS或者压根对其不感兴趣,那么没有必要看下去了,ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。

本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。

一、ExtJS下载以及配置

1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载)

2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码),配置过程如下:

(1) 新建一个页面文件Helloworld.html

(2) 在<head>和</head>之间添加如下代码:

(3) 这里注意<script></script>不能用</script>取代

(4) js的导入顺序不要更改

(3) 如果弹出一个HelloWorld的对话框,则代表配置成功。

二、表格控件Grid的使用

EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。

1、创建表格的列信息:

2、添加数据信息:

  

3、创建数据存储对象:

4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。

5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<div id='grid'></div>与之对应。

6、所有代码清单如下(已通过测试):

  • 6
    点赞
  • 78
    收藏
    觉得还不错? 一键收藏
  • 38
    评论
评论 38
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值