Extjs学习笔记 --- 实战

Posted on 2008-01-12 13:27 久城 阅读(17262) 评论(10)  编辑  收藏 所属分类: EXT&Extjs
闲了将近二十天,一直在学习Extjs,昨天接到通知,下周将进入新的项目组培训,培训内容是Flex。

在学Extjs的时候,见过别人对Extjs和Flex的比较。记得当时有人说Extjs和Flex根本不是一个层次上的框架,但那时我依然连Flex是什么都没有去查,而毅然的选择了Extjs。但可笑的是,下一个项目的应用就是Flex。

由于项目的紧张,也许对Extjs的学习将要告一段落了。所以,我该写点什么。

用Extjs做登录

index.html
<div id="north-div"><id="login" href="#">Login</a></div>

login.js
Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL 
= '../../ext/resources/images/default/s.gif'; //替换默认的空白图片
    Ext.QuickTips.init();  // 初始化鼠标停留时的显示框,这里用不上
    // 点击登录时触发的事件
    onClickLogin = function() {
        
var loginUrl = '../../login.do'; // 登录请求的url
        // 这里Login的Panel分为两部分,logoPanel和formPanel
        // 创建logoPanel对象
        var logoPanel = new Ext.Panel( {
            baseCls : 'x
-plain',
            html : 'Here is your logo'
        });
        
// 创建formPanel对象
        var formPanel = new Ext.form.FormPanel( {
            bodyStyle : 'padding:35px 25px 
0',
            baseCls : 'x
-plain',
            defaults : {
                width : 
200
            },
            defaultType : 'textfield',
            frame : 
false,
            id : 'login
-form',
            
// form面板上的组件
            items : [ {
                fieldLabel : 'User Name',
                name : 'name'
            }, {
                fieldLabel : 'Password',
                inputType : 'password',
                name : 'password'
            }],
            labelWidth : 
120,
            region : 'center',
            url : loginUrl
        });
        
// 创建window对象,用来装置以上两个面板,使login显示在一个window上
        var win = new Ext.Window( {
            
// window上的按钮,按钮时独立的,也可以设置在formPanel里
            buttons : [ {
                handler : 
function() { // 按钮login触发的事件
                    form.submit( {
                        waitMsg : 'Please Wait',
                        reset : 
true,
                        success : 
this.Success, // 登录成功的时候执行
                        fail : this.Fail,  // 登录失败的时候执行
                        scope : onClickLogin // 这里是为了指定this的范围
                    });
                },
                scope : onClickLogin,
                text : 'LOGIN'
            }, {
                handler : 
function() { // 按钮cancel触发的事件
                    win.hide();
                },
                scope : onClickLogin,
                text : 'CANCEL'
            }],
            buttonAlign : 'right',
            closable : 
false,
            draggable : 
true,
            height : 
200,
            id : 'login
-win',
            layout : 'border',
            plain : 
true,
            
// window上的组件
            items : [logoPanel, formPanel],
            title : 'Login',
            width : 
400
        });
        
// 取得表单,参考login按钮触发的事件
        form = formPanel.getForm();

        
// 显示window
        win.show();

        
// return里的为onClickLogin的共有函数
        return {
            Success : 
function(f, a) {
                
if (a && a.result) { //a表示action,a.result表示action返回的结果数据
                    win.destroy(
true);
                    
// setCookie
                    // set window.location
                }
            },
            Fail : 
function(f, a) {
                Ext.Msg.alert('Login failed');
            }
        };
    };
    
// 设置login事件
    Ext.get('login').on('click', onClickLogin);
});

Extjs是与后台对立的框架,所以后台的处理用什么是随意的,只要能够返回前台可以识别的数据即可。

用Extjs做布局

js代码片段:
Ext.contants = {};
Ext.contants.links 
= '<a id="link1" href="#">Link1</a><br><a id="link2" href="#">Link2</a>'
// 创建一个TabPanel作为中间的面板
var centerPanel = new Ext.TabPanel( {
    region : 'center',
    contentEl : 'center
-div',
    split : 
true,
    border : 
true,
    resizeTabs : 
true,
    minTabWidth : 
115,
    tabWidth : 
135,
    enableTabScroll : 
true,
    defaults : {
        autoScroll : 
true
    },
    plugins : 
new Ext.ux.TabCloseMenu()
});
// 用Viewport来实现布局
var viewport = new Ext.Viewport( {
    layout : 'border',
    
// items中包含东西南北中五个组件
    items : [ {
        
// 我将北部设计为全局导航,比如可以把login的按钮放在这里
        title : 'Welcome to come China',
        region : 'north',
        contentEl : 'north
-div',
        split : 
true,
        border : 
true,
        collapsible : 
true,
        height : 
50,
        minSize : 
50,
        maxSize : 
120
    }, {
        
// 空面板
        region : 'south',
        contentEl : 'south
-div',
        split : 
true,
        border : 
true,
        collapsible : 
true,
        height : 
50,
        minSize : 
50,
        maxSize : 
120
    }, {
        
// 空面板
        region : 'east',
        contentEl : 'east
-div',
        split : 
true,
        border : 
true,
        collapsible : 
true,
        width : 
120,
        minSize : 
120,
        maxSize : 
200
    }, {
        
// Links面板
        title : 'Links',
        region : 'west',
        contentEl : 'west
-div',
        split : 
true,
        border : 
true,
        collapsible : 
true,
        width : 
150,
        minSize : 
120,
        maxSize : 
200,
        layout : 'accordion',
        layoutConfig : {
            animate : 
true
        },
        
// 面板中包含几个组件
        items : [ {
            
// 以其中一个为例,这里面有两个links
            html : Ext.contants.links,
            title : 'Links',
            autoScroll : 
true,
            border : 
false,
            iconCls : 'nav'
        }, {
            title : 'aaa',
            html : 'aaa',
            border : 
false,
            autoScroll : 
true,
            iconCls : 'settings'
        }, {
            title : 'bbb',
            html : 'bbb',
            border : 
false,
            autoScroll : 
true,
            iconCls : 'settings'
        }, {
            title : 'bbb',
            html : 'ccc',
            border : 
false,
            autoScroll : 
true,
            iconCls : 'settings'
        }, {
            title : 'bb',
            html : 'ddd',
            border : 
false,
            autoScroll : 
true,
            iconCls : 'settings'
        }, {
            title : 'bbb',
            html : 'eee',
            border : 
false,
            autoScroll : 
true,
            iconCls : 'settings'
        }]
    }, centerPanel] 
//最后一个是中间的TabPanel
});

用事件来触发centerPanel中添加一个装有GridPanel的Tab,显示新闻列表,TabPanel中添加一个按钮实现添加新闻。
var zhaiiGrid;
// 在TabPanel中的Add按钮触发的事件,用来添加一条新信息
var addZhaii = function() {
    
var formPanel, win;
    
if (!formPanel) {
        formPanel 
= new Ext.form.FormPanel( {
            baseCls : 'x
-plain',
            defaults : {
                width : 
200
            },
            defaultType : 'textfield',
            frame : 
false,
            id : 'addZhaii
-form',
            items : [ {
                fieldLabel : 'Title',
                name : 'title'
            }, {
                fieldLabel : 'Contents',
                xtype : 'htmleditor',
                anchor : '
95%',
                allowBlank : 
false,
                height : 
200,
                name : 'contents'
            }],
            labelWidth : 
80,
            region : 'center',
            url : 'addZhaii.
do'
        });
    }

    
if (!win) {
        win 
= new Ext.Window( {
            buttons : [ {
                handler : 
function() {
                    form.submit( {
                        waitMsg : 'Please Wait',
                        reset : 
true,
                        
// success : Login.Success,
                            scope : addZhaii
                        });
                },
                scope : addZhaii,
                text : 'Add'
            }, {
                handler : 
function() {
                    win.hide();
                },
                scope : addZhaii,
                text : 'Cancel'
            }],
            buttonAlign : 'right',
            closable : 
false,
            draggable : 
true,
            height : 
300,
            id : 'addZhaii
-win',
            layout : 'border',
            minHeight : 
250,
            minWidth : 
530,
            plain : 
true,
            resizable : 
true,
            items : [formPanel],
            title : 'Link1 Window',
            width : 
650
        });
    }

    form 
= formPanel.getForm();

    win.show();
};
var addZhaiiAction = new Ext.Action( {
    text : 'Add Zhaii',
    handler : addZhaii, 
// 触发上面定义的添加事件
    iconCls : 'blist'
});
var addZhaiiTab = function() {
    
var expander = new Ext.grid.RowExpander( {
        tpl : 
new Ext.Template('<p><b>Title:</b> {title}<br>',
                '
<p><b>Contents:</b> {contents}</p>')
    });
    
var cm = new Ext.grid.ColumnModel([expander, {
        header : 'id',
        dataIndex : 'id'
    }, {
        header : 'title',
        width : 
300,
        dataIndex : 'title'
    }, {
        header : 'zhaier',
        dataIndex : 'zhaier'
    }, {
        header : 'date',
        dataIndex : 'date'
    }, {
        header : 'sc',
        dataIndex : 'sc'
    }, {
        header : 'hh',
        dataIndex : 'hh'
    }]);
    
var ds = new Ext.data.Store( {
        proxy : 
new Ext.data.HttpProxy( {
            url : '..
/../getZhaii.do'
        }),
        reader : 
new Ext.data.JsonReader( {
            totalProperty : 'totalProperty',
            root : 'root'
        }, [ {
            name : 'content'
        }, {
            name : 'hh'
        }, {
            name : 'sc'
        }, {
            name : 'date'
        }, {
            name : 'zhaier'
        }, {
            name : 'title'
        }, {
            name : 'id'
        }])
    });
    ds.load( {
        params : {
            start : 
0,
            limit : 
10
        }
    });
    
if (Ext.isEmpty(zhaiiGrid)) {
        zhaiiGrid 
= new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'zhaiiGrid',
            viewConfig : {
                forceFit : 
true
            },
            plugins : expander,
            collapsible : 
true,
            animCollapse : 
false,
            title : 'zhaiiGrid',
            iconCls : 'icon
-grid',
            closable : 
true,
            
// top处添加事件按钮
            tbar : [addZhaiiAction],
            
// bottom处的分页栏
            bbar : new Ext.PagingToolbar( {
                pageSize : 
10,
                store : ds,
                displayInfo : 
true,
                displayMsg: '显示第 {
0} 条到 {1} 条记录,一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        
// .show()了才会显示
        centerPanel.add(zhaiiGrid).show();
    } 
else if (zhaiiGrid = centerPanel.getItem('zhaiiGrid')) {
        
// zhaiiGrid.show();
    } else {
        zhaiiGrid 
= new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'zhaiiGrid',
            viewConfig : {
                forceFit : 
true
            },
            plugins : expander,
            collapsible : 
true,
            animCollapse : 
false,
            title : 'adsfasd',
            iconCls : 'icon
-grid',
            closable : 
true,
            tbar : [addZhaiiAction],
            bbar : 
new Ext.PagingToolbar( {
                pageSize : 
10,
                store : ds,
                displayInfo : 
true,
                displayMsg: '显示第 {
0} 条到 {1} 条记录,一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        centerPanel.add(zhaiiGrid).show();
    }
}
// 给link1添加事件
Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时,便添加zhaiiTab
addZhaiiTab();

以上是一些代码片断,前几天在研究desktop,想实现成动态的页面,代码还没写完。

暂时放下Extjs一些日子,明天开始学习Flex,既然都是客户端框架,应该多少有些共通之处吧。谁知道呢,学学看吧。

本文链接:http://www.blogjava.net/realsmy/archive/2008/01/12/174791.html



欢迎来访!^.^!
本BLOG仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误,望多多指教!不胜感激!

Feedback

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2008-01-13 01:43 by 咖啡屋的鼠标
哈哈,我是今天刚看完ext,成长历程跟你完全相反。把你的extjs换成Flex,把Flex换成Extjs就是我的心态。
ext确实很酷,目前最酷的客户端类库了。
而Flex跟ext分属两种不同世界的玩具,玩玩就知道了,顺便给你推荐一个Flex控件库:
http://code.google.com/p/flexlib/wiki/ComponentList

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2008-01-13 10:07 by 久城
哈哈,多谢!~以后向你请教Flex!

# re: Extjs学习笔记 --- 实战[未登录]  回复  更多评论   

2008-01-14 13:03 by 过客
脚本引擎的效率不同,所以不管extjs有多么强大,它都不会比flex更好,何况flex可以用N多flash内置的同时js不具有的组件。

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2008-01-17 11:39 by wangdei
http://www.yaonba.com/content.php?id=108177 这个也有exips的.

# re: Extjs学习笔记 --- 实战[未登录]  回复  更多评论   

2008-01-23 14:57 by left
先谢谢阿 学习下

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2008-07-24 19:08 by dafei
学习

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2008-09-22 17:09 by 王杰
能不能提供个联系方式啊
或者交流平台
不知你现在flex 的项目做完没?

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2009-02-03 18:31 by longfengabc
@过客
体积呢?Flex 体积和ExtJS是没法比的

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2009-02-11 10:42 by dalton
浏览器的相互不兼容性以及万恶的IE都在制约JS的发展

# re: Extjs学习笔记 --- 实战  回复  更多评论   

2009-04-10 16:59 by taoyang
很想学flex 学习中

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


网站导航:
 

Copyright © 久城