ExtJS grid一些属性说明

ExtJS grid一些属性说明

    1.       界面修改（css style）：
   
    Extjs中界面风格与我们产品本身的风格有很大不同，从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等，几乎都不同。Extjs对这些样式的设置都是由css完成的。如：
   
    选中行的颜色就可用如下设置完成：
   
    .x-grid3-row-selected{background:#c6e2ff!important;}
   
    其他的都类似，只要找到对应的class, 然后设置要修改的部分即可。
   
    2.       属性的作用（About Ext.grid. GroupingView, EditorGridPanel）：
   
    Extjs的grid功能强大，如排序、隐藏列或移动列等，这些都有一些属性与其对应，可以选择要还是不要。其中一些的属性和其作用如下：
   
    *. EditorGridPanel:
   
    border: false,              //grid的边界
   
    autoHeight: true,          //grid的高度是否要用指定的高度
   
    enableColumnMove: false,        //grid的列是否可以移动
   
    enableHdMenu: false,     //在列的header是否要有下拉菜单
   
    trackMouseOver: true,    //当鼠标移过行时，行是否要highlight
   
    stripeRows: true,         //让grid相邻两行背景色不同
   
    *. GroupingView:
   
    在要显示的数据中，根据它们的某个数据点进行分组，分组显示。这个数据点由*.GroupingStore中的groupField决定。*.GroupingView设置这个分组显示的grid的一些关于组的显示属性。如：
   
    forceFit:true,     //是否根据grid的宽度调整列的宽度，防止水平scrollbar的出现
   
    enableGroupingMenu: false,   //控制header的下拉菜单中是否有group的选项（Group By This Field, Show in Groups（checkbox））
   
    showGroupName: true,
   
    //用来分组的数据点这一列的header是否要随group name一起显示
   
    hideGroupedColumn: true, //用来分组的数据点这一列是否要显示
   
    startCollapsed: false,   //一开始进到grid这页，它的group是合起还是展开
   
    scrollOffset: -1,        //为垂直的scrollbar留下的space（默认是19px）
   
    3.       在单元格中添加图片：
   
    在Ext.grid.ColumnModel中对应于加图片的列，用它的render链接到一个函数进行添加。如：
   
    var colModel = new Ext.grid.ColumnModel（[
   
    {header:“com”, render: AddImgs.createDelegate（this）},
   
    {header:“test”, width:200, sortable:false}
   
    ]）；
   
    响应函数如下：
   
    AddImgs =   function（value,p,record）{
   
    if（record.data.descrip != “”）
   
    {
   
    p.attr='ext:qtip=“Add to playlist” style=“background-image:url（/imgs/icn_view.gif） !important; background-position: center 2px; background-repeat: no-repeat;cursor: pointer;”‘;
   
    }
   
    }
   
    函数中的record.data是grid的数据，而着色的就是要添加的图片的路径和图片名。

    
    4.       当显示内容的字数超过单元格可以显示的字数时，如何让其自动换行（how to wrap text when the length of characters is more than the width of the column）：
   
    设置这些单元格的所用类的css即可。 如：
   
    .x-grid3-cell-inner{
   
    white-space:normal;
   
    overflow:visible;
   
    }
   
    需要注意的是：overflow的默认值是hidden. 当加上white-space之后，本来wrap就可以了，但是单元格的高度还是一行的 高度，所以数据除了第一行，其它都看不到。只有把overflow的值改为visible后，单元格所在行的高度才会随着数据的行数而调整。
   
    5.       当一开始进入页面时，让所有的group除了第一个group展开（collapsed）外，其它的group都合上（folded）：
   
    首先通过设置属性startCollapsed让所有group都合上： startCollapsed:true;
   
    然后在store.load（{callback: function（records,o,s） {ToggleFirstGroup（）；} }）中调用函数把第一个group展开：
   
    //gridView是该grid所用的view, 如（var gv = new Ext.grid.GroupingView（{}）；）。
   
    function ToggleFirstGroup（gridView）
   
    {
   
    var grNum = gridView.getGroups（）。length;
   
    for （var i = 0; i < grNum ; i++）
   
    {
   
    var firstGroupID = gridView.getGroups（）[i].id;
   
    if（firstGroupID && firstGroupID != “”）
   
    {
   
    gridView.toggleGroup（firstGroupID）；
   
    break;
   
    }
   
    }
   
    }
   
    6.       date format:   数据为9/24/2008
   
    1）。这种format的结果是：Web Sep 24 00:00:00 UTC+0800 2008
   
    {
   
    header: dHeader,
   
    width: 90,
   
    sortable: true,
   
    dateFormat: 'Y-m-d',   //dateFormat是'm/d/Y’的话，得到的结果一样
   
    dataIndex: 'date'
   
    },
   
    2）。 这种format的结果是： 2008-09-24
   
    {
   
    header: dHeader,
   
    width: 90,
   
    sortable: true,
   
    renderer: Ext.util.Format.dateRenderer（‘Y-m-d’）， //format是‘m/d/Y',结果是“09/24/2008”
   
    dataIndex: 'date'
   
    },

   
    找到的一些关于Class Date的format及其输出的描述（http://extjs.com/deploy/ext/docs/output/Date.html）：
   
    ****************************
   
    Format Output       Description
   
    ------   ----------   --------------------------------------------------------------
   
    d       10           Day of the month, 2 digits with leading zeros
   
    D       Wed         A textual representation of a day, three letters
   
    j        10           Day of the month without leading zeros
   
    l       Wednesday   A full textual representation of the day of the week
   
    S       th            English ordinal day of month suffix, 2 chars （use with j）
   
    w       3            Numeric representation of the day of the week
   
    z       9             The julian date, or day of the year （0-365）
   
    W      01          ISO-8601 2-digit week number of year, weeks starting on Monday （00-52）
   
    F      January      A full textual representation of the month
   
    m      01           Numeric representation of a month, with leading zeros
   
    M      Jan          Month name abbreviation, three letters
   
    n       1            Numeric representation of a month, without leading zeros
   
    t       31           Number of days in the given month
   
    L       0            Whether it's a leap year （1 if it is a leap year, else 0）
   
    Y       2007        A full numeric representation of a year, 4 digits
   
    y       07           A two digit representation of a year
   
    a       pm          Lowercase Ante meridiem and Post meridiem
   
    A       PM          Uppercase Ante meridiem and Post meridiem
   
    g        3           12-hour format of an hour without leading zeros
   
    G       15          24-hour format of an hour without leading zeros
   
    h       03          12-hour format of an hour with leading zeros
   
    H       15          24-hour format of an hour with leading zeros
   
    i        05          Minutes with leading zeros
   
    s       01           Seconds, with leading zeros
   
    O     -0600         Difference to Greenwich time （GMT） in hours
   
    T      CST          Timezone setting of the machine running the code
   
    Z      -21600      Timezone offset in seconds （negative if west of UTC, positive if east）
   
    **********************************
   
    下面是一些format的格式及其对应结果：数据同上，用renderer: Ext.util.Format.dateRenderer（format）
   
    “Y-m-d”   -->   2008-09-24
   
    “y-m-d”   -->   08-09-24
   
    “F j, Y”    -->   September 24, 2008
   
    “F j, y”    -->   September 24, 08
   
    “F j, Y, g:i A” --> September 24, 2008, 12:00 AM