ExtJs中一个完整GridPanel实例

Question

博客地址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','Re'
            ]
            }),   
            //获取数据源(该方法返回一个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:"Re",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: 'Re'
            
            }
        ]
    
    });
     //弹出层
   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 Re=Edit_Panel.getForm().findField('Re').getValue();
            var jsonData='';
            if(ID=='')
            //如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色名称(RoleName),角色编码(RoleCode),说明(Re),操作类型(添加操作:AddUser,更新操作:UpdateUser)写成json的形式作为参数传到后台
           jsonData= {operatype:'AddRole',ID:ID,RoleName:RoleName,Re:Re};
            else
           jsonData= {operatype:'UpdateRole',ID:ID,RoleName:RoleName,Re:Re};
            Edit_Window.hide();
            CodeOperaMethod('../../WebUI/RoleManage/RoleManege.aspx',jsonData);
            //重新加载store信息
            store.reload();
            grid.store.reload();
            }
        },{
            text: '重置',  handler:function(){Edit_Panel.getForm().reset();}
        }]
    });
      </script>如果对你有用请点击对我有用
谢谢

Answer 1

提示内容过长
如下还有         //后台数据交互方法
       var CodeOperaMethod=function(u,p){
       var conn=new Ext.data.Connection();
       conn.request({
       //请求的 Url
       url:u,
       // 传递的参数
       params:p,
       method:'post',
       scope:this,
       //回调函数，根据执行结果作不同的操作，如果成功提示操作成功的信息，如果失败提示失败的信息
       callback:function(options,success,response){
       if(success){ Ext.MessageBox.alert("提示","操作成功！");
       store.reload();
       grid.store.reload();
       }
       else{ Ext.MessageBox.alert("提示","所提交的操作失败！");}
       
       }});};
       
         //删除方法
   function delRecord(btn,pressed)
   {
    //获取ID为MenuGridPanel的控件名称得到当前选中项
    rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
          if(rows.length==0)
          {
          Ext.Msg.alert("","请至少选择一行你要删除的数据！");
          return;
          }
    Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);}
        function showResult(btn)
        {
         //确定要删除你选定项的信息
        if(btn=='yes')
        {
            var row=Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
            var jsonData="";
            for(var i=0,len=row.length;i<len;i++)
            {
            //得到当前选中项的ID集合
            var ss =row[i].get("ID");
             if(i==0)
             jsonData = jsonData + ss; 
             else
             jsonData = jsonData + ","+ ss; 
         }
         //将要删除的信息传递到后台处理,然后重新加载grid
         var conn = new Ext.data.Connection();
         conn.request({
         url:"../../WebUI/RoleManage/RoleManege.aspx?DelRecode=", 
         params:{strProjects:jsonData},
         method: 'post',
         scope: this,
         callback:function(options,success, response){ 
         if(success){ 
         Ext.MessageBox.alert("提示","所选记录成功删除！");
         store.reload();
         grid.store.reload();
         } 
         else 
         { Ext.MessageBox.alert("提示","所选记录删除失败！");} 
         } 
         })
         
         }
         }; 
       //定义一个智能感应的ComboBox
       var cmbox=new Ext.form.ComboBox
       (
       {
         id:'cmbox',
         title:'角色名称',
         //加载数据源
         store:store,
         //从本地加载数据（智能感应效果）
         mode:"local",
         //显示字段类似DropDownlist中的DataTextField 
         displayField:'RoleName',
         //类似DropDownlist中的DataValueField  
         valueField:'ID',
         width:160,
         //不允许为空
         allowBlank:false,
         //默认值
    emptyText:'请输入角色名称进行搜索...',
    //当为空的时候提示
    blankText:'请输入角色名称...'
       }
       );
       //构建GridPanel
        var grid = new Ext.grid.GridPanel
        ({
            id:'MenuGridPanel',
            renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域
            title: '角色管理',//网格标题
            width:'100%',
            height: 500,
            store: store,//grid数据源
            loadMask: {msg:'加载数据中,请等待......'},//显示等待数据加载（loading）图标
            cm:cms,//列名称
            sm: new Ext.grid.CheckboxSelectionModel(),//要显示多选框列必加此项
            //定义一个toolbar
            tbar:
            [        
      {
      text:"编辑",
           cls: 'x-btn-text-icon details',
           icon:"../ext-3.1.0/blue16_042.png",
           handler:function()
           {
            //重置编辑模板
           Edit_Panel.getForm().reset();
           rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
      if(rows.length!=1)
      {
      Ext.Msg.alert("","请你选择一行数据进行操作！");
      return;
      }
      //打开窗体
       Edit_Window.show();
       //将选中项的信息绑定到TextField中
       Edit_Panel.getForm().findField('ID').setValue(rows[0].get('ID'));
            //Edit_Panel.getForm().findField('RoleCode').setValue(rows[0].get('RoleCode'));
            Edit_Panel.getForm().findField('RoleName').setValue(rows[0].get('RoleName'));
            Edit_Panel.getForm().findField('Re').setValue(rows[0].get('Re'));
            
      }
      }, 
      {
      text:"添加",
         cls: 'x-btn-text-icon details',
         icon:"../ext-3.1.0/add_16.png",
         handler:function()
           {
           Edit_Panel.getForm().reset();
           Edit_Window.show();
           }
           }, 
      {
      text:"删除",
            cls: 'x-btn-text-icon details',
             icon:"../ext-3.1.0/blue16_016.png",
            handler:delRecord
            },'-',
            
            //定义一个搜索框
            cmbox,
              '-',
            {
            
      xtype:'button',
       cls: 'x-btn-text-icon details',
           icon:"../ext-3.1.0/blue16_068.png",
      text:"查找",
      handler:function()
      {
       //Ext.getCmp("searchfield").getValue()得到Textfield的值
       //过滤条件为角色名称(RoleName)来搜索匹配的信息,
       //filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
       //第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
       store.filter('RoleName',Ext.getCmp("cmbox").getValue(),false,false);
      }
      }
       
           ],
            bbar: new Ext.PagingToolbar
            ({//自带分页工具条
                pageSize: 10,
                store: store,
                displayInfo: true,
                displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',
                emptyMsg: "没有数据"
            })
        });
        //从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10
        store.load({params:{start:0, limit:10}});
    });

Answer 2

如果用JQUERY写一个好了EXT不会

Answer 3

Ext写的比较麻烦
要相当的仔细

Answer 4

ext是好，但是我感觉体积好大啊，我还是喜欢jquery多一点，呵呵，顺便接分了

Answer 5

EXT还真是麻烦……想要好看的界面也需要为此付出代价……而JS也是麻烦的东西OTL

Answer 6

我也写过一个  简单的grid增删改查

Answer 7

前段时间做的就是这个，不过处理数据是JAVA的

Answer 8

EXT界面满漂亮的~~~可惜以前就学了点皮毛

Answer 9

恩，很不错。一直也用ext，只是由于ext的效率的确是个问题，所以仅仅用ext的viewport做页面框架，不再使用更多的控件了。
还有ext从2.0.2后更改了开源协议也是一个很大的打击。

Answer 10

现在我想前台页面使用extjs grid，后台为grid指定数据源，怎么实现呢？有好的代码吗？

Answer 11

怎么得到GridPanel的GridCommand 

Answer 12

数据格式是怎么样的啊，没说啊，整个dome 上传一下行不？？？

Answer 13

汗 都是强人 我这种刚学ext的小白 连看都看不怎么懂

Answer 14

求QQ  可以及时请教extjs

Answer 15

后台Struts的代码能不能也贴出来呀？