日期:2014-05-17  浏览次数:20561 次

ExtJs中一个完整GridPanel实例
博客地址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({