分组表格和表格响应表单实例

kingge08

浏览: 253798 次
性别:
来自: 北京

最近访客更多访客>>

jiviang

747017186

shareal

keguan_li

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT JavaScript CSS prototype HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>   
    <head>   
        <title>loadrecord.html</title>   
        <link rel="stylesheet" type="text/css" href="./ext-3.3.1/resources/css/ext-all.css" />   
        <script type="text/javascript" src="./ext-3.3.1/adapter/ext/ext-base.js"></script>   
        <script type="text/javascript" src="./ext-3.3.1/ext-all.js"></script>   
        <script type="text/javascript" src="loadrecord.js"></script>   
    </head>   
    <body>   
    </body>   
</html>

Ext.onReady(function(){   
    Ext.QuickTips.init();   
    Ext.form.Field.prototype.msgTarget="qtip";   
    var data = [   
                ["1","男",new Date(1979,09,06),"tom",21,"you_5214@sina.com"],   
                ["2","女",new Date(1980,08,07),"tony",46,"you_5214@sina.com"],   
                ["3","男",new Date(1990,07,08),"Jet Li",31,"you_5214@sina.com"],   
                ["4","女",new Date(1910,06,09),"washington",29,"you_5214@sina.com"]   
    ];   
    var fields = ['id','sex','brithday','name','age','eamil'];   
    var cm = new Ext.grid.ColumnModel([   
        { header: "ID", width: 60, sortable: true,dataIndex :'id'
        },   
        { header: "性别", width: 70, sortable: true,dataIndex :'sex'
        },   
        { header: "生日", width: 130, sortable: true,dataIndex :'brithday',   
            editor:new Ext.form.DateField()   
        },   
        { header: "姓名", width: 100, sortable: true,dataIndex :'name'},   
        { header: "年龄", width: 100, sortable: true,dataIndex :'age'
        },   
        { header: "Email", width: 120, sortable: true,dataIndex :'eamil'
        }   
    ]);   
    var store = new Ext.data.GroupingStore({   
        data :data,   
        reader : new Ext.data.ArrayReader({id:"id"},fields)   
    });   
    var gridForm = new Ext.FormPanel({   
        id: 'user_info',   
        applyTo:Ext.getBody(),   
        frame: true,   
        autoHeight:true,   
        labelAlign: 'left',   
        title: '员工信息表',   
        bodyStyle:'padding:5px',   
        width: 600,   
        items:[new Ext.grid.GridPanel({   
            title:"人员信息列表",   
                    width:600,   
                    autoHeight:true,   
                    fram:true,   
                    cm:cm,   
                    store:store,   
                    sm:new Ext.grid.RowSelectionModel({   
                        singleSelect: true,   
                        listeners: {   
                rowselect: function(sm, row, rec) {   
                    Ext.getCmp("user_info").getForm().loadRecord(rec);   
                }   
            }   
                    }),   
                    view:new Ext.grid.GroupingView({   
                        hideGroupedColumn : true,   
                        showGroupsText :"分组显示",   
                        groupByText:"使用当前字段排序",   
                        forceFit :true,   
                        columnsText :"隐藏/显示字段",   
                        sortAscText:"升序排列",   
                        sortDescText:"降序排列" 
                    })   
        }),{   
                xtype: 'fieldset',   
            labelWidth: 150,   
            title:'加载grid信息内容',   
            defaultType: 'textfield',   
            autoHeight: true,   
            items:[{   
                fieldLabel: 'ID',   
                name :'id',   
                anchor : '55%' 
            },{   
                fieldLabel: '性别',   
                name :'sex',   
                anchor : '55%' 
            },{   
                fieldLabel: '生日',   
                name :'brithday',   
                anchor : '55%' 
            },{   
                fieldLabel: '年龄',   
                name :'age',   
                anchor : '55%' 
            },{   
                fieldLabel: '邮箱',   
                name :'eamil',   
                anchor : '55%' 
            }]   
        }]   
    });   
});

分享到：

来自官方的开始时间和结束时间及密码和重复 ... | Ext验证汇总

2011-04-23 18:22
浏览 1082
评论(0)
分类:Web前端
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分组表格和表格响应表单实例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分组表格和表格响应表单实例

评论

发表评论

相关推荐

下拉框之——动态获取数据

表单提交方式一

来自官方的开始时间和结束时间及密码和重复密码验证

Ext验证汇总

按钮触发事件的三种表示方法

FormPanel示例

ExtJs错误信息提示的四种方式

在表格中出现鼠标一放到某列上就显示提示信息

简单表格之SimpleStore

Menu简单实例1

TabPanel的使用介绍

布局之anchor布局

布局之accordion布局

布局之fit布局

布局之border

布局一之column布局

Window介绍

Viewport介绍

面板panel介绍

下拉框ComboBox的简单应用示例1

最近访客更多访客>>