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. 转 ShowSlow+Yslow页面前端性能测试环境搭建

    ----//工具介绍 Yslow:YSlow是Yahoo发布的一款基于FireFox的插件. YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. ShowSlo ...

  2. Uri编码，包括javascript前端与C#服务器端

    URI编码的方法汇总 javascript中的编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码的主要方法:HttpUtility.UrlEncode. ...

  3. android自定义控件实例

    很多时候android常用的控件不能满足我们的需求,那么我们就需要自定义一个控件了.今天做了一个自定义控件的实例,来分享下. 首先定义一个layout实现按钮内部布局: 01 <?xml ver ...

  4. C#方法参数--值参数，引用参数，输出参数

    值参数: 使用值参数,通过复制实参的值到形参的方式,把数据传递到方法,方法被调用的时候,系统做如下操作: 在栈中为形参分配空间: 复制实参到形参. 注意:一个值参数的实参不一定是变量,它可以是任何能够 ...

  5. oracle关键字大全--注意不要乱用哦

    遇到怀疑可能使用了关键字,就来搜一搜吧 ... Oracle 关键字(保留字) 大全 其实这个东西可以在oracle 上输入一个sql语句就可以得到: select * from v$reserved ...

  6. mysql 一对多 group查询

    场景:查询所有A表的数据,并且关联B表,再数据集中插入一个COUNT列.该列的数据是B表的COUNT 扩展:假设join的表数据为空,但我任然要把所有表A的数据取出来,那就用LEFT JOIN SEL ...

  7. js 倒计时 （时分秒版本）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. get_class 返回对象的类名

    get_class — 返回对象的类名 传一个对象,可以把这个对象的类名返回出来(字符串) 参考: http://php.net/manual/zh/function.get-class.php

  9. Android开发4——文件操作模式

    一.基本概念 // 上下文对象private Context context; public FileService(Context context){ super(); this.context = ...

  10. 【转】如何遍历json数据

    var value = { "china":{ "hangzhou":{"item":"1"}, "shang ...