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. 转 Python标准库01 正则表达式 (re包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我将从正则表达式开始讲Python的标准库.正则表达式是文字处理中常用的工具,而且 ...

  2. webpack-dev-server的自动更新配置

    一.背景 测试发布一个项目,修改jsx中的内容,页面不自动更新. 每次必须执行npm run build:然后执行npm run start. 脚本如下: "scripts": { ...

  3. Note for video Machine Learning and Data Mining——training vs Testing

    Here is the note for lecture five. There will be several points  1. Training and Testing  Both of th ...

  4. STM32F103 AFIO时钟疑问

    在stm32F103系列中:AFIO是重映射辅助时钟,如果仅仅是使用第二功能(如uart,spi,),不需要打开,使用第二功能打开GPIO和第二功能时钟.我反复测试是这样的 AFIO时钟由RCC_AP ...

  5. Ext.net中Combobox如何绑定数据库中的值-通用方法

    今天在项目中再次碰到了问题,就是Combobox中的值如果是直接绑定很简单.简单添加项就行了.代码如下: <ext:ComboBox ID=" /> </Items> ...

  6. linux shell 删除指定文件夹下面 名称不包含指定字符的文件

    find /app/jenkins/jenkins/jobs/scam/* ! -name config.xml | xargs rm -rf 删除/app/jenkins/jenkins/jobs/ ...

  7. python AES双向对称加密解密

    高级加密标准(Advanced Encryption Standard,AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分 ...

  8. Spring Boot(一)：初步认识

    简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...

  9. ui-router路由控制器(一)

    angularUI 在不断发展过程中已经被划分成了几个模块,你可以选择你需要的模块载入,我们今天要了解一下路由控制器 ui-router ,它就是angularUI划分出出来的一个独立模块. 此模块只 ...

  10. 在 ASP.NET Web API 中，使用 命名空间（namespace） 来作为路由的参数

    这个问题来源于我想在 Web API 中使用相同的控制器名称(Controller)在不同的命名空间下,但是 Web API 的默认 路由(Route) 机制是会忽略命名空间的不同的,如果这样做,会看 ...