Extjs学习笔记 --- 实战

闲了将近二十天，一直在学习Extjs，昨天接到通知，下周将进入新的项目组培训，培训内容是Flex。

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

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

用Extjs做登录

index.html

< div  id ="north-div" >< a  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

 

 

(来源：http://www.iomo.cn)