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. PMP_PMP考试须知

    考试报名 按照报名须知和填表指南中的要求提交报名材料同时交纳考试费用.北京地区的考生直接到国家外国专家局培训中心报名:外地考生到所在地报名点报名:未设有报名点的地区,可直接与国家外国专家局培训中心联系 ...

  2. Report_Report Builder的一些基本概念（概念）

    2014-05-31 Created By BaoXinjian

  3. 自己定义View学习之12/7(进度条之混合模式)

    今天重点内容是我们学习自己定义view里面的混合模式.事实上我们的画布就跟photoshop一样.是个图层关系,一层盖着一层.这样就导致有非常多种覆盖模式,这就是我们今天的主题."混合模式& ...

  4. appserv - 最简单的绑定路径

    补充:此方法比较low. 推荐伪静态:http://www.cnblogs.com/CyLee/p/5544119.html 找到路径C:\AppServ\Apache24\conf\httpd.co ...

  5. iOS之Sqlite3封装

    一.代码下载 代码下载地址 二.实例效果展示 imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="效果图二.png&q ...

  6. 使用base64:url 来定义背景图片url

    普通的背景图片css是这样的: background-image:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/i ...

  7. WebDriver 原理

    注:学会根据执行顺序看底层代码 <以下内容摘自大师兄博客> WebDriver webdriver是按照server – client的经典设计模式设计的. webdriver的作用就是创 ...

  8. Linux写时拷贝技术（copy-on-write）

    1.传统的fork()函数创建一个子进程,子进程和父进程共享正文段,复制数据段,堆,栈到子进程示意图如下: 2.Linux的fork()函数-写时复制(copy-on-write)创建一个子进程,内核 ...

  9. 每日英语：China Underwhelmed After First Apple Event

    Apple's roll-out of its latest iPhones landed with a thud in China, the company's biggest foreign ma ...

  10. Oracle PLSQL Demo - 12.定义包体[Define PACKAGE BODY]

    CREATE OR REPLACE PACKAGE BODY temp_package_demo is FUNCTION f_demo(userid NUMBER) RETURN BOOLEAN IS ...