EXTJS入门教程及其框架搭建

最新推荐文章于 2024-07-29 17:49:33 发布

yaerfeng

最新推荐文章于 2024-07-29 17:49:33 发布

阅读量2.7w

点赞数 4

分类专栏： J2EE Ajax/Jquery/js/ext/dwr 文章标签： extjs入门框架搭建

本文链接：https://blog.csdn.net/yaerfeng/article/details/22719101

版权

J2EE 同时被 2 个专栏收录

96 篇文章 0 订阅

订阅专栏

Ajax/Jquery/js/ext/dwr

31 篇文章 0 订阅

订阅专栏

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

原创不易，转载请注明出处：EXTJS入门教程及其框架搭建

代码下载地址:http://www.zuidaima.com/share/1724474768788480.htm

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

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

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

 
<script>
 
 Ext.onReady( function () {
 
 Ext.QuickTips.init();
 
 Ext.form.Field.prototype.msgTarget='side';
 
 var viewport=new Ext.Viewport( {
 
 layout : 'fit',
 
 border : false,
 
 items : [new system.XXXXX()]
 
 });
 
 viewport.render();
 
 });
 
 </script>

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

附完整的代码：
PagingGridPanel.js

 
Ext.namespace('system');
 
system.PagingGridPanel = function(config) {
 
    Ext.applyIf(this, config);
 
    this.initUIComponents();
 
    system.PagingGridPanel.superclass.constructor.call(this);
 
    this.loadData();
 
};
 
Ext.extend(system.PagingGridPanel, Ext.Panel, {
 
    initUIComponents : function() {
 
        // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
 
        this.store1 = new Ext.data.Store({
 
            proxy : new Ext.data.MemoryProxy({
 
                total : 2,
 
                root : [{
 
                    age : 56,
 
                    name : "IOyFo"
 
                }, {
 
                    age : 239,
 
                    name : "87tPp"
 
                }]
 
            }),
 
            reader : new Ext.data.JsonReader({
 
                root : "root",
 
                total : "total",
 
                id : "id"
 
            }, [{
 
                mapping : "name",
 
                name : "name"
 
            }, {
 
                type : "int",
 
                mapping : "age",
 
                name : "age"
 
            }])
 
        });
 
 
 
        this.gridPanel1 = new Ext.grid.GridPanel({
 
            bbar : new Ext.PagingToolbar({
 
                xtype : "paging",
 
                emptyMsg : "No data to display",
 
                displayMsg : "Displaying {0} - {1} of {2}",
 
                store : this.store1
 
            }),
 
            selModel : new Ext.grid.RowSelectionModel({}),
 
            columns : [{
 
                header : "name",
 
                dataIndex : "name",
 
                sortable : true,
 
                hidden : false
 
            }, {
 
                header : "age",
 
                dataIndex : "age",
 
                sortable : true,
 
                hidden : false
 
            }],
 
            store : this.store1,
 
            height : 200,
 
            tbar : new Ext.Toolbar([{
 
                handler : function(button, event) {
 
                    this.onButtonClick(button, event);
 
                }.createDelegate(this),
 
                text : "button"
 
            }, {
 
                handler : function(button, event) {
 
                    this.onButtonClick(button, event);
 
                }.createDelegate(this),
 
                text : "button2"
 
            }])
 
        });
 
 
 
        Ext.apply(this, {
 
            items : [this.gridPanel1]
 
        });
 
        // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
 
    },
 
    loadData : function() {
 
        this.store1.load();
 
    },
 
    onButtonClick : function(button, event) {
 
        this.store1 = new Ext.data.Store({
 
            proxy : new Ext.data.MemoryProxy({
 
                total : 2,
 
                root : [{
 
                    age : 56,
 
                    name : "88888"
 
                }, {
 
                    age : 239,
 
                    name : "99999"
 
                }]
 
            }),
 
            reader : new Ext.data.JsonReader({
 
                root : "root",
 
                total : "total",
 
                id : "id"
 
            }, [{
 
                mapping : "name",
 
                name : "name"
 
            }, {
 
                type : "int",
 
                mapping : "age",
 
                name : "age"
 
            }])
 
        });
 
        this.store1.reload();
 
    }
 
});

index.html

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
 <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
 
 <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script>
 
<link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
 
 <script type="text/javascript" src="PagingGridPanel.js"></script>
 
</head>
 
<body>
 
<script>
 
    Ext.onReady(function() {
 
        Ext.QuickTips.init();
 
        Ext.form.Field.prototype.msgTarget = 'side';
 
        var viewport = new Ext.Viewport( {
 
            layout : 'fit',
 
            border : false,
 
            items : [new system.PagingGridPanel()]
 
        });
 
        viewport.render();
 
    });
 
</script>
 
 
 
</body>
 
</html>