EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。

首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具：extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：

1 <script type=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script>
2 <script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script>
3 <link rel=" stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " />
4 <script type=" text/javascript " src= "XXXXX.js "></script>

并在BODY中加入下面这段JAVA SCRIPT：

01 <script>
02  Ext.onReady( function () {
03  Ext.QuickTips.init();
04  Ext.form.Field.prototype.msgTarget='side';
05  var viewport=new Ext.Viewport( {
06  layout : 'fit',
07  border : false,
08  items : [new system.XXXXX()]
09  });
10  viewport.render();
11  });
12  </script>

其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。
附完整的代码： PagingGridPanel.js

001 Ext.namespace('system');
002 system.PagingGridPanel = function(config) {
003     Ext.applyIf(this, config);
004     this.initUIComponents();
005     system.PagingGridPanel.superclass.constructor.call(this);
006     this.loadData();
007 };
008 Ext.extend(system.PagingGridPanel, Ext.Panel, {
009     initUIComponents : function() {
010         // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
011         this.store1 = new Ext.data.Store({
012             proxy : new Ext.data.MemoryProxy({
013                 total : 2,
014                 root : [{
015                     age : 56,
016                     name : "IOyFo"
017                 }, {
018                     age : 239,
019                     name : "87tPp"
020                 }]
021             }),
022             reader : new Ext.data.JsonReader({
023                 root : "root",
024                 total : "total",
025                 id : "id"
026             }, [{
027                 mapping : "name",
028                 name : "name"
029             }, {
030                 type : "int",
031                 mapping : "age",
032                 name : "age"
033             }])
034         });
035  
036         this.gridPanel1 = new Ext.grid.GridPanel({
037             bbar : new Ext.PagingToolbar({
038                 xtype : "paging",
039                 emptyMsg : "No data to display",
040                 displayMsg : "Displaying {0} - {1} of {2}",
041                 store : this.store1
042             }),
043             selModel : new Ext.grid.RowSelectionModel({}),
044             columns : [{
045                 header : "name",
046                 dataIndex : "name",
047                 sortable : true,
048                 hidden : false
049             }, {
050                 header : "age",
051                 dataIndex : "age",
052                 sortable : true,
053                 hidden : false
054             }],
055             store : this.store1,
056             height : 200,
057             tbar : new Ext.Toolbar([{
058                 handler : function(button, event) {
059                     this.onButtonClick(button, event);
060                 }.createDelegate(this),
061                 text : "button"
062             }, {
063                 handler : function(button, event) {
064                     this.onButtonClick(button, event);
065                 }.createDelegate(this),
066                 text : "button2"
067             }])
068         });
069  
070         Ext.apply(this, {
071             items : [this.gridPanel1]
072         });
073         // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
074     },
075     loadData : function() {
076         this.store1.load();
077     },
078     onButtonClick : function(button, event) {
079         this.store1 = new Ext.data.Store({
080             proxy : new Ext.data.MemoryProxy({
081                 total : 2,
082                 root : [{
083                     age : 56,
084                     name : "88888"
085                 }, {
086                     age : 239,
087                     name : "99999"
088                 }]
089             }),
090             reader : new Ext.data.JsonReader({
091                 root : "root",
092                 total : "total",
093                 id : "id"
094             }, [{
095                 mapping : "name",
096                 name : "name"
097             }, {
098                 type : "int",
099                 mapping : "age",
100                 name : "age"
101             }])
102         });
103         this.store1.reload();
104     }
105 });

index.html

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
08  <script type="text/javascript" src="PagingGridPanel.js"></script>
09 </head>
10 <body>
11 <script>
12     Ext.onReady(function() {
13         Ext.QuickTips.init();
14         Ext.form.Field.prototype.msgTarget = 'side';
15         var viewport = new Ext.Viewport( {
16             layout : 'fit',
17             border : false,
18             items : [new system.PagingGridPanel()]
19         });
20         viewport.render();
21     });
22 </script>
23  
24 </body>
25 </html>

项目截图

运行截图

EXTJS入门教程及其框架搭建的更多相关文章

  1. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  2. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  3. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  4. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  5. 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  6. 无废话ExtJs 入门教程十四[文本编辑器：Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  7. 无废话ExtJs 入门教程十三[上传图片：File]

    无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  8. 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]

    无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...

  9. 无废话ExtJs 入门教程十一[下拉列表：Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

随机推荐

  1. ASM_Oracle ASM的常用命令（汇总）

    2014-07-02 Created By BaoXinjian

  2. Unix环境高级编程(五)进程环境

    本章主要介绍了Unix进程环境,包含main函数是如何被调用的,命令行参数如何传递,存储方式布局,分配存储空间,环境变量,进程终止方法,全局跳转longjmp和setjmp函数及进程的资源限制. ma ...

  3. Linux时间子系统(三) 用户空间接口函数

    一.前言 从应用程序的角度看,内核需要提供的和时间相关的服务有三种: 1.和系统时间相关的服务.例如,在向数据库写入一条记录的时候,需要记录操作时间(何年何月何日何时). 2.让进程睡眠一段时间 3. ...

  4. Spring +quartz获取ApplicationContext上下文

    job存在数据库中,能够进行动态的增增删改查,近期遇到了怎样获取ApplicationContext上下文的问题.解决的方法例如以下 applicationContext-quartz.xml < ...

  5. 《Effective Java》读书笔记六（方法）

    No38 检查参数的有效性 对于公有的方法,要用Javadoc的@throws标签(tag)在文档中说明违反参数值时会抛出的异常.这样的异常通常为IllegalArgumentException.In ...

  6. Memcached安装使用和源代码调试

    memcached官网:http://memcached.org/ 一.安装 下载 # wget http://www.memcached.org/files/memcached-1.4.25.tar ...

  7. C# 遍历枚举（枚举是目的，遍历（获取）是手段）

    C# 遍历枚举   C#中,如何获取(遍历)枚举中所有的值: public enum Suits { Spades, Hearts, Clubs, Diamonds, NumSuits } priva ...

  8. 利用yacc和lex制作一个小的计算器

    买了本<自制编程语言>,这本书有点难,目前只是看前两章,估计后面的章节,最近一段时间是不会看了,真的是好难啊!! 由于本人是身处弱校,学校的课程没有编译原理这一门课,所以就想看这两章,了解 ...

  9. 78. Longest Common Prefix【medium】

    Given k strings, find the longest common prefix (LCP).   Example For strings "ABCD", " ...

  10. NY891 区间选点 找点

    找点 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...