/**
* 作者：陈杰
* QQ : 710782046
* Email:ovenjackchain@gmail.com
* Blog :http://hi.baidu.com/jackvoilet
*/
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
   var editor = this;
   var imgform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    fileUpload : true,
    items : [{
       xtype : 'textfield',
       fieldLabel : '选择文件',
       name : 'userfile',
       id : 'userfile',
       inputType : 'file',
       allowBlank : false,
       blankText : '文件不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";
      furl=imgform.form.findField('userfile').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      var filename=furl.substring(furl.lastIndexOf("\\")+1);
      if (furl==""||furl==null) {return;}
      if(type!='jpg'&&type!='bmp'&&type!='gif'&&type!='png'){
       alert('仅支持jpg、bmp、gif、png格式的图片');
       return;
      }
      imgform.form.submit({
       url : '/newsinfo.mvc/AddFiles_newsinfo',
       waitMsg : '正在上传......',
       waitTitle : '请等待',
       method : 'POST',
       success : function() {
        var element = document.createElement("img");
        element.src = "../UploadFile/"+filename;
        element.style.width="300px";
             element.style.height="200px";
        if (Ext.isIE) {
         editor.insertAtCursor(element.outerHTML);
        } else {
         var selection = editor.win.getSelection();
         if (!selection.isCollapsed) {
          selection.deleteFromDocument();
         }
         selection.getRangeAt(0).insertNode(element);
        }
        win.close();
       },
       failure : function(form, action) {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传失败，仅支持jpg、bmp、gif、png格式的图片');
       
       }
      
      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      win.close(this);
     }
    }]
   })

   var win = new Ext.Window({
      title : "上传图片",
      id : 'picwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      iconCls:'icon-uploadpic',
      layout : "fit",
      items : imgform

     });
   win.show();
  
},//上传图片的扩展
addFile : function() {
   var editor = this;
   var fileform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    fileUpload : true,
    items : [{
       xtype : 'textfield',
       fieldLabel : '选择文件',
       name : 'userfile_F',
       id : 'userfile_F',
       inputType : 'file',
       allowBlank : false,
       blankText : '文件不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";//文件物理地址
      var fname="";//文件名称
      furl=fileform.form.findField('userfile_F').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='doc'&&type!='xls'){
       alert('仅支持上传doc、xls格式的文件!');
       return;
      }
      fname=furl.substring(furl.lastIndexOf("\\")+1);
      fileform.form.submit({
       url : '/newsinfo.mvc/AddFiles_newsinfo',
       waitMsg : '正在上传......',
       waitTitle : '请等待',
       method : 'POST',
       success : function() {
        var element = document.createElement("a");
        element.href = "../UploadFile/"+fname;
        element.target = '_blank';
        element.innerHTML = fname;
        if (Ext.isIE) {
         editor.insertAtCursor(element.outerHTML);
        } else {
         var selection = editor.win.getSelection();
         if (!selection.isCollapsed) {
          selection.deleteFromDocument();
         }
         selection.getRangeAt(0).insertNode(element);
        }
        winFile.close();
       },
       failure : function() {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传失败，仅支持上传doc、xls格式的文件!');
       
       }
      
      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winFile.close(this);
     }
    }]
   })

   var winFile = new Ext.Window({
      title : "上传附件",
      id : 'picwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-uploadfile',
      items : fileform

     });
   winFile.show();
  
},//上传附件的扩展
addflash : function() {
   var editor = this;
   var flashform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    items : [{
       xtype : 'textfield',
       fieldLabel : 'flash地址',
       name : 'userflash',
       id : 'userflash',
       allowBlank : false,
       blankText : 'http://',
       emptyText : 'http://',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '添加',
     type : 'submit',
     handler : function() {
      var furl="";//文件物理地址
      furl=flashform.form.findField('userflash').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='swf'&&type!='flv'){
       alert('非法格式，请检查！');
       return;
      }
      var element = document.createElement("embed");
      element.src = furl;
      element.type="application/x-shockwave-flash";
      element.quality="high";
      element.style.width="300px";
      element.style.height="200px";
      if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      winflash.close();
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winflash.close(this);
     }
    }]
   })

   var winflash = new Ext.Window({
      title : "插入flash",
      id : 'flashwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-swf',
      items : flashform

     });
   winflash.show();
  
},//插入flash的扩展
addfilm : function() {
   var editor = this;
   var filmform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 70,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    items : [{
       xtype : 'textfield',
       fieldLabel : '多媒体地址',
       name : 'userfilm',
       id : 'userfilm',
       allowBlank : false,
       blankText : 'http://',
       emptyText : 'http://',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '添加',
     type : 'submit',
     handler : function() {
      var furl="";//文件物理地址
      var regImg = new RegExp(/\.(mp3|wav|wma|wmv|avi|mpg|asf|rm|rmvb)$/);
      var regrm=new RegExp(/\.(rm|rmvb)$/);
      furl=filmform.form.findField('userfilm').getValue();
      //var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(!furl.match(regImg)){
       alert('非法格式，请检查！系统支持：mp3,wav,wma,wmv,avi,mpg,asf,rm,rmvb');
       return;
      }
      var element = document.createElement("embed");
      element.src = furl;
      element.style.width="300px";
      element.style.height="200px";
      if(furl.match(regrm))
         element.type="audio/x-pn-realaudio-plugin";
      else
         element.type="video/x-ms-asf-plugin";
      element.loop="true";
      element.autostart="true";
      if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      winfilm.close();
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winfilm.close(this);
     }
    }]
   })

   var winfilm = new Ext.Window({
      title : "插入多媒体",
      id : 'filmwin',
      width : 410,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-film',
      items : filmform

     });
   winfilm.show();
  
},//插入过媒体的扩展
createToolbar : function(editor) {
   HTMLEditor.superclass.createToolbar.call(this, editor);
   this.tb.insertButton(16, {
      cls : "x-btn-icon",
      iconCls : "icon-uploadpic",
      handler : this.addImage,
      tooltip : "添加图片",
      scope : this
     });
   this.tb.insertButton(17, {
      cls : "x-btn-icon",
      iconCls : 'icon-uploadfile',
      handler : this.addFile,
      tooltip : "添加文件",
      scope : this
     });
     this.tb.insertButton(18, {
      cls : "x-btn-icon",
      iconCls : 'icon-swf',
      handler : this.addflash,
      tooltip : "添加flash文件",
      scope : this
     });
     this.tb.insertButton(19, {
      cls : "x-btn-icon",
      iconCls : 'icon-film',
      handler : this.addfilm,
      tooltip : "添加多媒体文件",
      scope : this
     });
  this.tb.insertButton(20, {//插入层的扩展，即插入div
      cls : "x-btn-icon",
      iconCls : 'icon-div',
      handler : function() {
         var element = document.createElement("div");
         element.id="InsertDiv";
         element.style.backgroundColor="#FAFAFB";
         element.style.borderWidth="1px";
         element.style.borderStyle="solid";
         element.style.borderColor="#AECBE7";
         element.innerHTML="在此插入内容：<BR>";
         if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      },
      tooltip : "添加div层",
      scope : this
     });
     this.tb.insertButton(21, { //插入横线的扩展
      cls : "x-btn-icon",
      iconCls : 'icon-hr',
      handler :function() {
         var element = document.createElement("HR");
         if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      },
      tooltip : "添加横线",
      scope : this
     });
}
});
Ext.reg('CJ_starthtmleditor', HTMLEditor);

大家可以根据这个方法继续扩展自己想要的东西。

上面上传图片和附件有一个方法，内容如下：

//上传文件
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AddFiles_newsinfo(FormCollection collection)
        {
            var rdto = new ResultDTO();
            var c = Request.Files[0];
            if (c != null && c.ContentLength > 0)
            {
                string filename = c.FileName;
                string destination = Server.MapPath("/UploadFile/");
                c.SaveAs(destination+ filename);
            }
            return null;
        }

使用的时候，首先在页面中添加该js的引用，然后，在需要的地方加入以下代码：

                         {
                            border : false,
                            columnWidth : 1,
                            layout : 'form',
                            items : [{
                               fieldLabel : '信息内容',
                               xtype : 'CJ_starthtmleditor',
                               name : 'nr',
                               id : 'nr',
                               allowBlank : false,
                               anchor : '98%'
                              }]

                           }

转载地址：http://hi.baidu.com/jackvoilet/blog/item/38551a3dc709d40cbba16717.html

doLoad:function(C){
 var B={},
 A=this.paramNames;
 B[A.start]=C;
 B[A.limit]=this.pageSize;
 B['name']=Ext.getCmp("queryNam").getValue();
 B['isUse']=Ext.getCmp("queryIsUse").getValue();
 B['cpcod']=Ext.getCmp("queryfndcc").getValue();
 if(this.fireEvent("beforechange",this,B)!==false){
  this.store.load({params:B})
 }
}

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

grid.addListener('rowdblclick', rowdblclickFn);

Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
     {header:'编号',dataIndex:'id'},
     {header:'性别',dataIndex:'sex'},
     {header:'名称',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true},

现在就来看看这个Ext.data.Store是如何转换三种数据的。

1.二维数组：
// ArrayData
var data = [
     ['1','male','name1','descn1'],
     ['2','male','name1','descn2'],
     ['3','male','name3','descn3'],
     ['4','male','name4','descn4'],
     ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
         {name: 'sex',mapping: 1},
         {name: 'name',mapping: 2},
         {name: 'descn',mapping: 3}
     ])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。
记得要执行一次ds.load()，对数据进行初始化。

数据的显示显得非常简单：
HTML文件：
<div id='grid'></div>
JS文件：
var grid = new Ext.grid.GridPanel({
     el: 'grid',
     ds: ds,
     cm: cm
});
grid.render();

其显示结果为：

2.如何在表格中添加CheckBox呢？

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动行号
    sm,//添加的地方
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

3. 如何做Grid上触发事件呢？
下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

4.如何做Grid中做出快捷菜单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//点击后触发的事件
            text: '右键菜单1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右键菜单2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下：

5.如何将一列中的数据根据要求进行改变呢？
比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>红男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>绿女</span>";
    }
}

其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程：
6.Json数据
至于这种数据的类型请大家自己看Ajax的书籍：
//JsonData
var data = {
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要写，否则显示的数据会少一行
});
grid.render();

7.使用XML数据：
注意，读取XML数据必须在服务器上进行。
XML数据test.xml的内容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     <results>2</results>
     <item>
           <id>1</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
</dataset>var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML数据
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

8.从服务器获取数据和数据翻页控件
从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：
服务器文件data.asp:
<%
    start = cint(request("start"))
    limit = cint(request("limit"))

    dim json
    json=cstr("{totalProperty:100,root:[")
   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。下面是start=0,limit=10的JSON数据：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我们使用分页控件来控制Grid的数据：
Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
   
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
   
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    grid.render();
})

10.如何在Grid的上方添加按钮呢？
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
});

11.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();

var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});

Panel必须有DIV存在。其包含的Component有items管理。

本文是在学习Ext2.0的基础上写的，因此，参考了许多网上存在的Blog文章。在此表示致敬！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/boy00fly/archive/2009/03/20/4008317.aspx

使用定义样式

.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决

使用grid的遮罩提示时，一定要设表格的height和width。

enableColumnMove和enableColumnResize为false表示禁用拖放列和改变列宽度功能。
默认情况下一次可以选一行或多行。

stripeRows:true显示为斑马线。

问题：自主决定每列的宽度
1.手动指定
cm(columnmudule)支持给每列设置宽度,如果不指定则默认的宽度为100px.

var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度},....});

2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});

会按照设置的宽度之间的比例进行显示，而不是按照设置的宽度。

3.指定自动填充剩余空间的列
也可以指定一列来完成该操作，但该操作要求该列必须定义时指定id值。
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度,id:'id标识属性'},....});

接下来设定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标识'});

问题：让列支持排序
在建立列模型时指定storable:true

问题：中文排序
1.为Ext.data.Store设置一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性。

2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
    if (this.sortInfo && !this.remoteSort) {
        var s = this.sortInfo, f = s.field;
        var st = this.fields.get(f).sortType;
        var fn = function(r1, r2) {
            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
            if (typeof(v1) == "string") {
                return v1.localeCompare(v2);
            }
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        };
        this.data.sort(s.direction, fn);
        if(this.snapshot && this.snapshot != this.data) {
            this.snapshot.sort(s.direction, fn);
        }
    }
};

该函数可以加在ext-all.js文件的未尾。或者放在html页面的最上面，保证在EXT初始化之后，实际代码调用之前执行。

问题：显示日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字符串必须要与实际日期的内容相对应。
如日期为2009-5-2 12:30:58 则格式化字符串为'Y-j-n H:i:s'
如日期为2009-05-02 12:30:58 则格式化字符串为'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Date类
以保证能够读取到正确的日期值。

2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字符串表示显示的格式是什么。

问题：如何在单元格时显示红色的字或图片，按钮等
在ColumnModule的相应列的属性中添加renderer:渲染函数
如:
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源索',renderer:渲染函数}]);
渲染函数：
function 函数名(value){
 if(value==值）｛
  return html+css代码;
 }
 else
 {
  return 其它的html+css;
 }

}

问题：如何设置表格的表头右键提示为汉字内容

Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型，Ext.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属性
var gid=new Ext.grid.GridPanel(
 {renderTo:'grid',
  store:store,
  cm:cm,
  viewConfig:{
  columnsText:'显示的列',
  scrollOffset:30,
  sortAscText:'升序',
  sortDescText:'降序'
  //forceFit:true
 }
 });

 问题：用grid实现分页显示
１.为Grid添加分页工具条
在GridPanel中进行设置

                                var grid = new Ext.grid.GridPanel({
                                    renderTo: 'grid',
                                    autoHeight: true,
                                    store: store,
                                    cm: cm,
                                    bbar: new Ext.PagingToolbar({
                                        pageSize:3,
                                        store: store,
                                        displayInfo: true,
                                        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                                        emptyMsg: "没有记录"
                                    })
                                });
                                store.load();

在使用分页工具条之后，store.load()必须发生在构造GridPanel之后.而且数据源不能使用Ext.data.SimpleStore.Grid每次都会显示数据源中所有的数据.因此数据一定要先在后台分好.

如果要在Grid的头部显示分页工具条，可以将bbar改为tbar。

２.后台分页

后台jsp的做法：

①取得开始页号与页大小

String start = request.getParameter("start");
String limit = request.getParameter("limit");

②访问数据库取得数据

③将数据输出为json字符串

格式为：{totalProperty:总记录数,root:[｛.....｝，｛.....｝，....]),其中root数组存放当前页的数据.

前台页面的做法：

①修改Store

 var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:jsp的url'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

②向服务器传参

store.load({params:{start:0,limit:10}});

 Grid每次都会显示全部在root中的数据，而不论totalProperty的值是多少，所以分页时root数组中的数据由后台jsp控制。

3.前台分页
EXT中的Grid是把得到的数据一次性显示在表格里，并没有直接为我们提供内存分页的功能，但是在Ext的examples/locale/PapingMemoryProxy.js，它可以从本地数据读取数据同，并实现内存分页。
步骤如下：
①将PagingMemoryProxy.js导入html
②把以前的MemroryProxy换成PagingMemoryProxy
③调用store.load({params:{start:0,limit:3}});显示最开始的3条记录。

 4.后台排序

在默认的情况下，Grid只能对当前页的数据进行排序，如果对所有的数据排序，则需要将排序信息提交到后台，由后台将信息组装到SQL里，然后再由后台将处理好的数据返回给前台。
    var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]),
        remoteSort: true
    });
其中remoteSort: true表示允许后台排序，这样在排序时就会有变化，不会立即显示出排序的结果，而是向后台提交两个参数，分别是sort和dir，表示要排序的字段与升序或降序。

jsp则进行相应的处理
String start = request.getParameter("start");
String limit = request.getParameter("limit");

String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再进行数据库分页，并返回json格式的分页数据。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/hfy211/archive/2009/06/29/4306357.aspx