博客地址http://blog.csdn.net/ws_hgo/archive/2010/08/26/5839449.aspx

最后效果如图：

<script type="text/javascript">
   Ext.onReady(function(){
        //初始化Extjs
        Ext.QuickTips.init();
        //从本地加载图片,如果不定义默认从Exj官方网站加载
        Ext.BLANK_IMAGE_URL ='./resources/images/default/s.gif';
        //首先读取数据，Json格式
        var store = new Ext.data.Store
        ({      
            //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
            reader:new Ext.data.JsonReader
            ({
            root:"Table",
            //从数据库中读取的总记录数
            totalProperty: 'totalCount',
            //要读取出来的字段
            fields:
            [
                'ID','RoleName','Remark'
            ]
            }),   
            //获取数据源(该方法返回一个json格式的数据源)
            proxy: new Ext.data.HttpProxy
            ({
                url: '../../BackGround/RoleManage/Role.ashx?AutoLoad=true'      
            })
        });
        //定义GridPanel的列名称
       var cms=new Ext.grid.ColumnModel
       (
       [
        new Ext.grid.RowNumberer({header:"编号",width:30,align:"center"}),//添加一个编号
        new Ext.grid.CheckboxSelectionModel(),//增加 CheckBox多选框列
        //header列名称，dateIndex对应数据库字段名称,sortable支持排序
        {header:"角色名称",dataIndex:"RoleName",sortable:true},
        {header:"角色备注",dataIndex:"Remark",sortable:true}
         
       ]
       );
      //编辑panel，用于添加，修改
      var Edit_Panel=new Ext.FormPanel({    
        labelWidth: 75, 
        labelAlign:'right',
        frame:true,      
        bodyStyle:'padding:5px 5px 0',
        width: 380,
        defaults: {width: 150},
        defaultType: 'textfield',
        items: 
        [
            {
                fieldLabel: '角色编号',
                name: 'ID',
                xtype:'hidden'
            },
            {
                //label名称
                fieldLabel: '角色名称',
                //textfield名称
                name: 'RoleName',
                //textfield正则
                allowBlank:false,//是否允许为空！false不允许
                blankText:"不允许为空",//提示信息
                minLength :2 , 
                minLengthText : "姓名最少2个字符", 
                maxLength : 4 , 
                maxLengthText :"姓名至多4个字符",
                regex:/[\u4e00-\u9fa5]/,//正则表达式
                regexText:"只能为中文"
            },
            {
               fieldLabel: '角色编码',
               name: 'RoleCode',
               allowBlank:false,
               blankText:"不允许为空",
                xtype:'hidden'
            },
            {
             fieldLabel: '说明',
                name: 'Remark'
            
            }
        ]
    
    });
     //弹出层
   var Edit_Window = new Ext.Window({
        collapsible: true,
        maximizable: true,
        minWidth: 300,
        height :180 ,
        minHeight: 200,
        width:378,
        modal:true,
        closeAction:"hide",
        //所谓布局就是指容器组件中子元素的分布，排列组合方式
        layout: 'form',//layout布局方式为form
        plain: true,
        title:'编辑对话框',
        bodyStyle: 'padding:5px;',
        buttonAlign: 'center',
        items: Edit_Panel,
        buttons: [{
            text: '保存',
            //点击保存按钮后触发事件
            handler:function(){
            //得到编辑模板中id为ID的控件名称的值
            var ID=Edit_Panel.getForm().findField('ID').getValue();
              //得到编辑模板中id为RoleName的控件名称的值
            var RoleName=Edit_Panel.getForm().findField('RoleName').getValue();
            //var RoleCode=Edit_Panel.getForm().findField('RoleCode').getValue();
            var Remark=Edit_Panel.getForm().findField('Remark').getValue();
            var jsonData='';
            if(ID=='')
            //如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色