| Defined In: | GroupingView.js |
| Class: | Ext.grid.GroupingView |
| Extends: | Ext.grid.GridView |
var grid = new Ext.grid.GridPanel({
// A groupingStore is required for a GroupingView
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
}),
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
// custom grouping text template to display the number of items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
renderTo: document.body
});
| 配置项 | 定义者 | |
|---|---|---|
|
hideGroupedColumn
: Boolean
True to hide the column that is cur...
True to hide the column that is currently grouped
|
GroupingView | |
|
showGroupName
: Boolean
True to display the name for each s...
True to display the name for each set of grouped rows (defaults to true)
|
GroupingView | |
|
startCollapsed
: Boolean
True to start all groups collapsed
True to start all groups collapsed
|
GroupingView | |
|
enableGrouping
: Boolean
False to disable grouping functiona...
False to disable grouping functionality (defaults to true)
|
GroupingView | |
|
enableGroupingMenu
: Boolean
True to enable the grouping control...
True to enable the grouping control in the column menu
|
GroupingView | |
|
enableNoGroups
: Boolean
True to allow the user to turn off ...
True to allow the user to turn off grouping
|
GroupingView | |
|
emptyGroupText
: String
The text to display when there is a...
The text to display when there is an empty group value
|
GroupingView | |
|
ignoreAdd
: Boolean
True to skip refreshing the view wh...
True to skip refreshing the view when new rows are added (defaults to false)
|
GroupingView | |
|
groupTextTpl
: String
The template used to render the gro...
The template used to render the group header. This is used to
format an object which contains the following properties:
|
GroupingView | |
|
groupRenderer
: Function
The function used to format the gro...
The function used to format the grouping field value for
display in the group header. Should return a string value. This takes the following parameters:
|
GroupingView | |
|
header
: String
The text with which to prefix the g...
The text with which to prefix the group field value in the group header line.
|
GroupingView | |
|
groupByText
: String
Text displayed in the grid header m...
Text displayed in the grid header menu for grouping by a column
(defaults to 'Group By This Field').
|
GroupingView | |
|
showGroupsText
: String
Text displayed in the grid header f...
Text displayed in the grid header for enabling/disabling grouping
(defaults to 'Show in Groups').
|
GroupingView | |
|
enableRowBody
: Boolean
True to add a second TR element per...
True to add a second TR element per row that can be used to provide a row body
that spans beneath the data row.Use the {@link #getRowClass} method's rowParams config to customize the row body. True表示为在每一数据行的下方加入一个TR的元素,为行部分提供位置。应使用{@link #getRowClass}方法的rowParams的配置自定义行部分。
|
GridView | |
|
emptyText
: String
Default text to display in the grid...
Default text to display in the grid body when no rows are available (defaults to ''). 当GRID没有一行可供显示时出现在body的提示文本(默认为"")。
|
GridView | |
|
autoFill
: Boolean
True to auto expand the columns to ...
True to auto expand the columns to fit the grid when the grid is created. True表示为当GRID创建后自动展开各列,自适应整个GRID。
|
GridView | |
|
forceFit
: Boolean
True to auto expand/contract the si...
True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. True表示除了auto expand(自动展开)外,还会对超出的部分进行缩减,让每一列的尺寸适应GRID的宽度大小,阻止水平滚动条的出现。
|
GridView | |
|
listeners
: Object
一个配置项对象,可方便在该对象初始化时便加入多个事件处理函数。 这应该...
一个配置项对象,可方便在该对象初始化时便加入多个事件处理函数。 这应该是一个如#addListener有效的配置项对象,即可一次过加入多个事件处理函数。
|
Observable | |
| 属性 | 定义者 | |
|---|---|---|
|
scrollOffset:
预留给滚动条的空白位置(默认为19像素)
预留给滚动条的空白位置(默认为19像素)
|
GridView | |
|
sortClasses:
排序时头部的CSS样式类(默认为["sort-asc", "sort...
排序时头部的CSS样式类(默认为["sort-asc", "sort-desc"])。
|
GridView | |
|
sortAscText:
The text displayed in the "Sort As...
The text displayed in the "Sort Ascending" menu item “升序”菜单项的提示文字
|
GridView | |
|
sortDescText:
The text displayed in the "Sort De...
The text displayed in the "Sort Descending" menu item “降序”菜单项的提示文字
|
GridView | |
|
columnsText:
The text displayed in the "Columns...
The text displayed in the "Columns" menu item “列”菜单项的提示文字
|
GridView | |
| 方法 | 定义者 | |
|---|---|---|
GroupingView
(
Object config
)
: Ext.grid.GroupingView
构造器
构造器
参数项:
|
GroupingView | |
toggleGroup
(
String groupId,
Boolean expanded
)
Toggles the specified group if no...
Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
参数项:
|
GroupingView | |
toggleAllGroups
(
Boolean expanded
)
Toggles all groups if no value is...
Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
参数项:
|
GroupingView | |
|
expandAllGroups
(
)
Expands all grouped rows.
Expands all grouped rows.
参数项:
|
GroupingView | |
|
collapseAllGroups
(
)
Collapses all grouped rows.
Collapses all grouped rows.
参数项:
|
GroupingView | |
getGroupId
(
String value
)
: String
Dynamically tries to determine th...
Dynamically tries to determine the groupId of a specific value
参数项:
|
GroupingView | |
GridView
(
Object config
)
: Ext.grid.GridView
构造器
构造器
参数项:
|
GridView | |
scrollOffset
(
Record record,
Number index,
Object rowParams,
Record record,
Number index,
[Object rowParams],
Store ds
)
: String
Override this function to apply cu...
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class').
customization of various aspects of a body row, if applicable. Note that this object will only be applied if #enableRowBody = true, otherwise it will be ignored. The object may contain any of these properties:
参数项:
|
GridView | |
getRow
(
Number index
)
: HtmlElement
指定一个行索引,返回该行的<TR> HtmlElement
指定一个行索引,返回该行的<TR> HtmlElement
参数项:
|
GridView | |
getCell
(
Number row,
Number col
)
: HtmlElement
指定一个单元格的坐标,返回该单元格的<TD> HtmlElem...
指定一个单元格的坐标,返回该单元格的<TD> HtmlElement
参数项:
|
GridView | |
getHeaderCell
(
Number index
)
: HtmlElement
指定一个列索引,返回该列头部的单元格的<TD> HtmlEle...
指定一个列索引,返回该列头部的单元格的<TD> HtmlElement
参数项:
|
GridView | |
|
scrollToTop
(
)
滚动grid到顶部
滚动grid到顶部
参数项:
|
GridView | |
focusRow
(
Number row
)
使指定的行得到焦点
使指定的行得到焦点
参数项:
|
GridView | |
focusCell
(
Number row,
Number col,
Boolean hscroll
)
使指定的单元格得到焦点
使指定的单元格得到焦点
参数项:
|
GridView | |
refresh
(
[Boolean headersToo]
)
刷新grid UI
刷新grid UI
参数项:
|
GridView | |
fireEvent
(
String eventName,
Object... args
)
: Boolean
触发指定的事件,并将欲执行的处理函数的参数传入。(应该至少要有事件的...
触发指定的事件,并将欲执行的处理函数的参数传入。(应该至少要有事件的名称)
参数项:
|
Observable | |
addListener
(
String eventName,
Function handler,
[Object scope],
[Object options]
)
为该组件加入事件处理函数(event handler)
sc...
为该组件加入事件处理函数(event handler)
处理函数执行时所在的作用域。处理函数“this”的上下文。 触发事件后开始执行处理函数的延时时间(invocation:the act of making a particular function start),单位:毫秒 true代表为下次事件触发加入一个要处理的处理函数,然后再移除本身。 不同配搭方式的选项 一次调用加入上多个处理函数(handlers) 或者是以简写的方式书写,前提是只允许同一个的作用域对象传入到所有的处理函数中:
参数项:
|
Observable | |
removeListener
(
String eventName,
Function handler,
[Object scope]
)
移除侦听器
移除侦听器
参数项:
|
Observable | |
|
purgeListeners
(
)
从这个对象身上移除所有的侦听器
从这个对象身上移除所有的侦听器
参数项:
|
Observable | |
addEvents
(
Object object
)
定义观察者的事件。
定义观察者的事件。
参数项:
|
Observable | |
hasListener
(
String eventName
)
: Boolean
查询该对象是否有指定事件的侦听器
查询该对象是否有指定事件的侦听器
参数项:
|
Observable | |
|
suspendEvents
(
)
暂停触发所有的事件(参阅#resumeEvents)
暂停触发所有的事件(参阅#resumeEvents)
参数项:
|
Observable | |
|
resumeEvents
(
)
重新触发事件(参阅{@link #suspendEvents})
重新触发事件(参阅{@link #suspendEvents})
参数项:
|
Observable | |
on
(
String eventName,
[Object scope],
Function handler,
[Object options]
)
为该元素添加事件处理函数(event handler),addLis...
为该元素添加事件处理函数(event handler),addListener的简写方式 @param {String} eventName 侦听事件的类型 @param {Object} scope (可选的) 执行处理函数的作用域 @param {Function} handler 事件涉及的方法 @param {Object} options (可选的)
参数项:
|
Observable | |
un
(
String eventName,
Function handler,
[Object scope]
)
移除侦听器 @param {String} eventName ...
移除侦听器 @param {String} eventName 侦听事件的类型 @param {Function} handler 事件涉及的方法 @param {Object} scope (可选的)处理函数的作用域
参数项:
|
Observable | |
capture
(
Observable o,
Function fn,
[Object scope]
)
开始捕捉特定的观察者。 在事件触发之前,所有的事件会以“事件名称+标...
开始捕捉特定的观察者。 在事件触发之前,所有的事件会以“事件名称+标准签名”的形式传入到函数(传入的参数是function类型)。 如果传入的函数执行后返回false,则接下的事件将不会触发。 @param {Observable} o 要捕捉的观察者 @param {Function} fn 要调用的函数 @param {Object} scope (可选的)函数作用域
参数项:
|
Observable | |
releaseCapture
(
Observable o
)
从Observable身上移除所有已加入的捕捉captures。 @...
从Observable身上移除所有已加入的捕捉captures。 @param {Observable} o 要释放的观察者
参数项:
|
Observable | |
| 事件 | 定义者 | |
|---|---|---|
beforerowremoved
(
Ext.grid.GridView view,
Number rowIndex,
Ext.data.Record record
)
当行被移除之前触发。
当行被移除之前触发。
参数项:
|
GridView | |
beforerowsinserted
(
Ext.grid.GridView view,
Number firstRow,
Number lastRow
)
插入行之前触发。
插入行之前触发。
参数项:
|
GridView | |
beforerefresh
(
Ext.grid.GridView view
)
在视图刷新之前触发
在视图刷新之前触发
参数项:
|
GridView | |
rowremoved
(
Ext.grid.GridView view,
Number rowIndex,
Ext.data.Record record
)
当有行被移除时触发
当有行被移除时触发
参数项:
|
GridView | |
rowsinserted
(
Ext.grid.GridView view,
Number firstRow,
Number lastRow
)
当有行被插入时触发
当有行被插入时触发
参数项:
|
GridView | |
rowupdated
(
Ext.grid.GridView view,
Number firstRow,
Ext.data.record record
)
当有一行的内容被更新后触发。
当有一行的内容被更新后触发。
参数项:
|
GridView | |
refresh
(
Ext.grid.GridView view
)
当GridView主体刷新完毕后触发
当GridView主体刷新完毕后触发
参数项:
|
GridView | |