最代码官方的gravatar头像
最代码官方 2014-03-06 14:49:21

EXTJS入门教程及其框架搭建

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

首先是为每一个页面定义一个类,再以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>

项目截图

EXTJS入门教程及其框架搭建

运行截图

EXTJS入门教程及其框架搭建


打赏

文件名:zuidaima_extjs.rar,文件大小:1.571K 下载
  • /
      • /zuidaima_extjs
          • /zuidaima_extjs/WebContent
            • /zuidaima_extjs/WebContent/PagingGridPanel.js
            • /zuidaima_extjs/WebContent/index.html
最代码最近下载分享源代码列表最近下载
guoyuefeng  LV1 2021年7月24日
gcy212  LV2 2019年3月13日
lixiaozhuang  LV2 2018年9月13日
lanjianxiong  LV1 2018年5月21日
yangnan1224  LV2 2017年10月9日
wzy_net  LV1 2017年8月17日
yateng123  LV1 2017年4月30日
风之徒  LV1 2017年3月14日
njnjnjaz  LV1 2017年3月6日
yerudao  LV5 2017年3月2日
最代码最近浏览分享源代码列表最近浏览
msstat  LV5 2023年11月9日
微信网友_6549826556514304  LV2 2023年7月6日
lironggang  LV38 2022年8月8日
brucega  LV3 2022年6月2日
changup  LV6 2022年2月2日
持之以恒 2021年8月13日
暂无贡献等级
guoyuefeng  LV1 2021年7月24日
黑仔勇  LV10 2021年6月8日
diamondsong 2021年6月5日
暂无贡献等级
duduyan  LV11 2021年6月1日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友