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后,单元格所在行的高度才会随着数据的行数而调整。
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