最代码官方的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
最代码最近下载分享源代码列表最近下载
gcy212 LV22019年3月13日
星星星星
lixiaozhuang LV22018年9月13日
星星星星
lanjianxiong LV12018年5月21日
星星
yangnan1224 LV22017年10月9日
星星星星
wzy_net LV12017年8月17日
星星
yateng123 LV12017年4月30日
星星
风之徒 LV12017年3月14日
星星
njnjnjaz LV12017年3月6日
星星
yerudao LV52017年3月2日
月亮星星
wanhao0107 LV22017年2月27日
星星星星
最代码最近浏览分享源代码列表最近浏览
506667372 LV38月12日
星星星星星星
assadd LV97月16日
月亮月亮星星
ymrdfwwx7月16日
暂无贡献等级
123456xzz6月4日
暂无贡献等级
e307911 LV75月30日
月亮星星星星星星
leshihu4月30日
暂无贡献等级
18682740107 LV33月31日
星星星星星星
wangzile1994 LV83月25日
月亮月亮
mango12273月20日
暂无贡献等级
lilyzhu03月11日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友