index.js

一个基于ext的ajax小例子

Ext.BLANK_IMAGE_URL = 'lib/resources/images/default/s.gif';

Ext.onReady(function(){

/*  设置提示消息的显示方式  */
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
/*  装载头部的模版  */
    var Header = new Ext.Panel({
        border:false,
        autoLoad: {url: 'template/Header.html', callback: function(){}, scope: this}
    });
    Header.render('Header');
    
/* 　装载底部的模版   */
    var Footer = new Ext.Panel({
        border:false,
        autoLoad: {url: 'template/Footer.html', callback: function(){}, scope: this}
    });
    Footer.render('Footer');
    
/*  设置需要显示的数据  */
    var data = [
        ['1','javaeye','http://www.javaeye.com','java相关论坛'],
        ['2','test2','name2','descn2'],
        ['3','test3','name3','descn3'],
        ['4','test4','name4','descn4'],
        ['5','test4','name5','descn5']
    ];
    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'url'},
            {name: 'descn'}
        ])
    });
    
/*  设置每一行的选择框  */
    var sm = new Ext.grid.CheckboxSelectionModel();
    ds.load();
    var urlChange = function(value){
                        return "<a target='_blank' href='" + value + "'>" + value + "</a>";
                    }
    var cm = new Ext.grid.ColumnModel([sm,
        {header: '编号',dataIndex: 'id',width: 40,align: 'right'},
        {header: '名称',dataIndex: 'name',width: 150,align: 'left'},
        {header: '链接',dataIndex: 'url',renderer: urlChange,width: 300,align: 'left'},
        {header: '描述',dataIndex: 'descn',width: 200,align: 'left'}
    ]);
    
/*  设置分页的工具条  */
    var bbar = new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
    
/*  创建表格  */
    var grid = new Ext.grid.GridPanel({
        contentEl: 'siteTeam',
        ds: ds,
        cm: cm,
        autoWidth: false,
        sm: sm,
        bbar: bbar,
        width: 995,
        border:false
    });
    grid.render('siteTeam');
    
/*  创建本页面的ｔａｂｐａｎｅｌ　并初始化  　*/
	var westMenu = new Ext.TabPanel({
	                    deferredRender:false,
	                    activeTab:0,
	                    height:400,
	                    width:1000,
	                    items:[{
	                        contentEl:'tab1',
	                        title: '站点介绍'
	                    },{
	                        contentEl:'tab2',
	                        title: '其他信息'
	                    },{
                            contentEl:'tab3',
                            title: '常用网站收集',
                            items:[grid]
                        }]
                    });
	westMenu.render("MainBody");
	
/*  创建登录是需要使用的表单  */
    var form = new Ext.form.FormPanel({
        defaultType: 'textfield',
        labelAlign: 'right',
        title: '用户登陆',
        labelWidth: 120,
        frame: true,
        width: 500,
        autoHeight: true,
        waitMsgTarget: true,
    
        items: [{
            fieldLabel: '用户名',
            name:"userAccount",
            id:"userAccount",
            allowBlank:false
        },{
            fieldLabel: '密码',
            inputType :'password',
            id:"passwd",
            name:"passwd"
        }],
        buttons: [{
            text: '登陆',
            handler: function(){
                form.getForm().submit({
                    url:'../servlet/login',
                    waitMsg:'正在验证用户...',
                    success: onLoginSuccess,
                    failure: onFailure
                });
            }
        },{
            text: '取消',
            handler: function(){
                win.hide();
            }
        }]
    });
/*  在用户校验失败的时候判断是否是服务器连接失败  */
    var onFailure = function(form,action){
	    if(action.failureType=="connect"){
	       Ext.Msg.alert('服务器异常', '服务器异常，请与管理员联系！');
	    }
    }
/*  用户校验成功之后的动作  */
    var gotoUrl = function(){
        window.location.href="ProjectManage.jsp";
    }
	var onLoginSuccess = function(form,action){
	    win.hide();
	}.createSequence(gotoUrl,this)
	
/*  登录是需要使用的表单放在这个弹出窗口中  */
    var win = new Ext.Window({
        el:'window-win',
        layout:'fit',
        width:400,
        height:140,
        closeAction:'hide',
        items: [form],
        buttons: []
    });
    
/*  设置由哪一个事件来触发登陆的弹出窗口  */
	Ext.get('loginButton').on('click', function(){
        win.show(Ext.get('loginButton'));
	});
});