ExtJS grid一些属性说明

￡神魔★判官ぃ 2022-07-10 08:29 241阅读 0赞

转自 ： [http://hi.baidu.com/yebing0736/blog/item/cd27f6dd8373a1a9cd1166f2.html][http_hi.baidu.com_yebing0736_blog_item_cd27f6dd8373a1a9cd1166f2.html]

ExtJS grid一些属性说明

<table style="table-layout: fixed; width: 100%;"> 
 <tbody> 
 <tr> 
 <td> 
 <div> 
 <table style="table-layout: fixed;"> 
 <tbody> 
 <tr> 
 <td> 
 <div>
 1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 界面修改(css style)： 
 Extjs中界面风格与我们产品本身的风格有很大不同，从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等，几乎都不同。Extjs对这些样式的设置都是由css完成的。如： 
 选中行的颜色就可用如下设置完成： 
 .x-grid3-row-selected{background:#c6e2ff!important;} 
 &nbsp;&nbsp;&nbsp; 其他的都类似，只要找到对应的class, 然后设置要修改的部分即可。 
 &nbsp; 
 2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 属性的作用(About Ext.grid. GroupingView, EditorGridPanel): 
 Extjs的grid功能强大，如排序、隐藏列或移动列等，这些都有一些属性与其对应，可以选择要还是不要。其中一些的属性和其作用如下： 
 *. EditorGridPanel: 
 border: false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //grid的边界 
 autoHeight: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //grid的高度是否要用指定的高度 
 enableColumnMove: false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //grid的列是否可以移动 
 enableHdMenu: false,&nbsp;&nbsp;&nbsp;&nbsp; //在列的header是否要有下拉菜单 
 trackMouseOver: true,&nbsp;&nbsp;&nbsp; //当鼠标移过行时，行是否要highlight 
 stripeRows: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //让grid相邻两行背景色不同 
 *. GroupingView: 
 在要显示的数据中，根据它们的某个数据点进行分组，分组显示。这个数据点由*.GroupingStore中的groupField决定。*.GroupingView设置这个分组显示的grid的一些关于组的显示属性。如： 
 &nbsp;&nbsp;&nbsp;&nbsp; forceFit:true,&nbsp;&nbsp;&nbsp;&nbsp; //是否根据grid的宽度调整列的宽度，防止水平scrollbar的出现 
 &nbsp;&nbsp;&nbsp;&nbsp; enableGroupingMenu: false,&nbsp;&nbsp; //控制header的下拉菜单中是否有group的选项(Group By This Field, Show in Groups(checkbox)) 
 showGroupName: true, 
 //用来分组的数据点这一列的header是否要随group name一起显示 
 &nbsp;&nbsp;&nbsp;&nbsp; hideGroupedColumn: true, //用来分组的数据点这一列是否要显示 
 &nbsp;&nbsp;&nbsp;&nbsp; startCollapsed: false,&nbsp;&nbsp; //一开始进到grid这页，它的group是合起还是展开 
 scrollOffset: -1,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //为垂直的scrollbar留下的space(默认是19px) 
 &nbsp; 
 3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在单元格中添加图片： 
 在Ext.grid.ColumnModel中对应于加图片的列，用它的render链接到一个函数进行添加。如： 
 var colModel = new Ext.grid.ColumnModel([ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header:”com”, render: AddImgs.createDelegate(this)}, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {header:”test”, width:200, sortable:false} 
 ]); 
 响应函数如下： 
 AddImgs =&nbsp;&nbsp; function(value,p,record){ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(record.data.descrip != "") 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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;"'; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } 
 } 
 函数中的record.data是grid的数据,而着色的就是要添加的图片的路径和图片名。 
 &nbsp; 
 4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当显示内容的字数超过单元格可以显示的字数时，如何让其自动换行(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后，单元格所在行的高度才会随着数据的行数而调整。 
 &nbsp; 
 5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当一开始进入页面时，让所有的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; 
 &nbsp;&nbsp; for (var i = 0; i &lt; grNum ; i++) 
 &nbsp;&nbsp; { 
 &nbsp;&nbsp;&nbsp;&nbsp; var firstGroupID = gridView.getGroups()[i].id; 
 &nbsp;&nbsp;&nbsp;&nbsp; if(firstGroupID &amp;&amp; firstGroupID != "") 
 &nbsp;&nbsp;&nbsp;&nbsp; { 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gridView.toggleGroup(firstGroupID); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;&nbsp;&nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp; 
 &nbsp;&nbsp; } 
 } 
 &nbsp; 
 6.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; date format:&nbsp;&nbsp; 数据为9/24/2008 
 1).这种format的结果是：Web Sep 24 00:00:00 UTC+0800 2008 
 &nbsp;&nbsp;&nbsp;&nbsp; { 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; header: dHeader, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 90, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sortable: true, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dateFormat: 'Y-m-d',&nbsp;&nbsp; //dateFormat是'm/d/Y'的话，得到的结果一样 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataIndex: 'date' 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, 
 2). 这种format的结果是: 2008-09-24 
 { 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; header: dHeader, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 90, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sortable: true, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; renderer: Ext.util.Format.dateRenderer('Y-m-d'), //format是'm/d/Y'，结果是”09/24/2008” 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataIndex: 'date' 
 }, 
 找到的一些关于Class Date的format及其输出的描述(http://extjs.com/deploy/ext/docs/output/Date.html): **************************** 
 Format Output&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Description 
 ------&nbsp;&nbsp; ----------&nbsp;&nbsp; -------------------------------------------------------------- 
 &nbsp;&nbsp; d&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Day of the month, 2 digits with leading zeros 
 &nbsp;&nbsp; D&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Wed&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A textual representation of a day, three letters 
 &nbsp;&nbsp; j&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Day of the month without leading zeros 
 &nbsp;&nbsp; l&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Wednesday&nbsp;&nbsp; A full textual representation of the day of the week 
 &nbsp;&nbsp; S&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; th&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; English ordinal day of month suffix, 2 chars (use with j) 
 &nbsp;&nbsp; w&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Numeric representation of the day of the week 
 &nbsp;&nbsp; z&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The julian date, or day of the year (0-365) 
 W&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ISO-8601 2-digit week number of year, weeks starting on Monday (00-52) 
 &nbsp;&nbsp; F&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; January&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A full textual representation of the month 
 &nbsp;&nbsp; m&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Numeric representation of a month, with leading zeros 
 &nbsp;&nbsp; M&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Jan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Month name abbreviation, three letters 
 &nbsp;&nbsp; n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Numeric representation of a month, without leading zeros 
 &nbsp;&nbsp; t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 31&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Number of days in the given month 
 &nbsp;&nbsp; L&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Whether it's a leap year (1 if it is a leap year, else 0) 
 &nbsp;&nbsp; Y&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2007&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A full numeric representation of a year, 4 digits 
 &nbsp;&nbsp; y&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 07&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A two digit representation of a year 
 &nbsp;&nbsp; a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lowercase Ante meridiem and Post meridiem 
 &nbsp;&nbsp; A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Uppercase Ante meridiem and Post meridiem 
 &nbsp;&nbsp; g&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12-hour format of an hour without leading zeros 
 &nbsp;&nbsp; G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 15&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 24-hour format of an hour without leading zeros 
 &nbsp;&nbsp; h&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12-hour format of an hour with leading zeros 
 &nbsp;&nbsp; H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 15&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 24-hour format of an hour with leading zeros 
 &nbsp;&nbsp; i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 05&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Minutes with leading zeros 
 &nbsp;&nbsp; s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Seconds, with leading zeros 
 &nbsp;&nbsp; O&nbsp;&nbsp;&nbsp;&nbsp; -0600&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Difference to Greenwich time (GMT) in hours 
 &nbsp;&nbsp; T&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CST&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Timezone setting of the machine running the code 
 Z&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -21600&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Timezone offset in seconds (negative if west of UTC, positive if east) 
 ********************************** 下面是一些format的格式及其对应结果：数据同上,用renderer: Ext.util.Format.dateRenderer(format) 
 “Y-m-d”&nbsp;&nbsp; --&gt;&nbsp;&nbsp; 2008-09-24 
 “y-m-d”&nbsp;&nbsp; --&gt;&nbsp;&nbsp; 08-09-24 
 “F j, Y” &nbsp;&nbsp; --&gt;&nbsp;&nbsp; September 24, 2008 
 &nbsp;&nbsp;&nbsp;&nbsp; “F j, y” &nbsp;&nbsp; --&gt;&nbsp;&nbsp; September 24, 08 &nbsp;&nbsp;&nbsp;&nbsp; “F j, Y, g:i A” --&gt; September 24, 2008, 12:00 AM 
 </div> </td> 
 </tr> 
 </tbody> 
 </table> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

[http_hi.baidu.com_yebing0736_blog_item_cd27f6dd8373a1a9cd1166f2.html]: http://hi.baidu.com/yebing0736/blog/item/cd27f6dd8373a1a9cd1166f2.html