paulwong

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 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="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>


学习网站:http://www.dojochina.com/

posted on 2009-01-21 16:32 paulwong 阅读(2310) 评论(1)  编辑  收藏 所属分类: EXTJS

Feedback

# re: EXTJS入门 2014-03-07 11:55 最代码

你好,我根据你的博客,整理了一个分享代码,地址:http://www.zuidaima.com/share/1724474768788480.htm  回复  更多评论   



只有注册用户登录后才能发表评论。


网站导航: