projectmanage.js

一个基于ext的ajax小例子

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

Ext.onReady(function(){
    init();
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);
});

var init = function(){

/*  由ｄｗｒ提供的数据创建适合ｇｒｉｄ使用的数据  */
    var recordType = Ext.data.Record.create([
        {name: "id", type: "int"},
        {name: "title", type: "string"},
        {name: "content", type: "string"},
        {name: "name", mapping:"author.name", type: "string"},
        {name: "email", mapping:"author.email", type: "string"}
      ]);
    var ds = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(testdwr.getItems, true),
        reader: new Ext.data.ListRangeReader({id:"id",totalProperty:'totalSize'},recordType),
        remoteSort: true
      });
    ds.load({params:{start:0, limit:10}, arg:[]});
    
/*  创建列信息  */
    var cm = new Ext.grid.ColumnModel([{header: 'id',
                                        width: 30,
                                        sortable: false,
                                        dataIndex: 'id'
                                        },
                                        {header: 'title',
                                        width: 100,
                                        sortable: false,
                                        dataIndex: 'title'
                                        },
                                        {
                                        header: 'name',
                                        width: 100,
                                        sortable: false,
                                        dataIndex: 'name'
                                        },
                                        {
                                        header: 'content',
                                        width: 200,
                                        sortable: false,
                                        dataIndex: 'content'
                                        },
                                        {
                                        header: 'email',
                                        width: 200,
                                        sortable: false,
                                        dataIndex: 'email'
                                        }]);
/*  创建分页工具条  */
    var bbar = new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
/*  创建ｇｒｉｄ  */
    var grid = new Ext.grid.GridPanel({
        contentEl: 'testGrid',
        ds: ds,
        cm: cm,
        autoWidth: false,
        bbar: bbar,
        width: 787,
        height: 270,
        border:false,
        loadMask: true
    });
    grid.render('testGrid');

/*  引入左侧菜单  */
    var menuPanel = new Ext.Panel({
        border:false,
        autoLoad: {url: 'template/Menu.html', callback: function(){}, scope: this}
    });
    menuPanel.render('MenuPanel');
    
/*  引入上部子菜单  */
    var subTitle = new Ext.Panel({
        border:false,
        autoLoad: {url: 'template/SubTitle.html', callback: function(){}, scope: this}
    });
    subTitle.render('subTitle');
    
/*  引入头部子菜单  */
    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 MainPanel2 = new Ext.Panel({
        height: 100,
        width: 787,
        collapsible: true,
        autoHeight: false,
        html: 'testpanel',
        title: '项目2'
    });
    var MainPanel1 = new Ext.Panel({
        height: 295,
        collapsible: true,
        width: 787,
        title: '文章一览 请双击要选中的行。',
        items:[grid]
    });
    MainPanel1.render('MainPanel');
    MainPanel2.render('MainPanel');
    
    /*  设置ｇｒｉｄ的双击事件  */
    grid.on("rowdblclick" , function(grid){
       var row = grid.getSelectionModel().getSelected();
       alert(row.get("title"))
    });
}