ext.grid.groupingview.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.grid.GroupingView-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.grid.GroupingView-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.grid.GroupingView-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.grid.GroupingView-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.grid.GroupingView"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.grid.GroupingView</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </td>
        </tr>
        -->
        <tr>
            <td class="label">
                Defined In:
            </td>
            <td class="hd-info">
                GroupingView.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.grid.GroupingView
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.grid.GridView
            </td>
        </tr>
    </table>
    <div class="description">
        Adds the ability for single level grouping to the grid.
 <pre><code>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
});</code></pre
    </div>
    <div class="hr">
    </div>
    <a id="Ext.grid.GroupingView-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="hideGroupedColumn-header"></a>
                        <b>hideGroupedColumn</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True to hide the column that is cur... 
                            </div>
                            <div class="long">
                                True to hide the column that is currently grouped
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="showGroupName-header"></a>
                        <b>showGroupName</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True to display the name for each s... 
                            </div>
                            <div class="long">
                                True to display the name for each set of grouped rows (defaults to true)
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="startCollapsed-header"></a>
                        <b>startCollapsed</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True to start all groups collapsed
 
                            </div>
                            <div class="long">
                                True to start all groups collapsed
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="enableGrouping-header"></a>
                        <b>enableGrouping</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                False to disable grouping functiona... 
                            </div>
                            <div class="long">
                                False to disable grouping functionality (defaults to true)
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="enableGroupingMenu-header"></a>
                        <b>enableGroupingMenu</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True to enable the grouping control... 
                            </div>
                            <div class="long">
                                True to enable the grouping control in the column menu
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="enableNoGroups-header"></a>
                        <b>enableNoGroups</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True to allow the user to turn off ... 
                            </div>
                            <div class="long">
                                True to allow the user to turn off grouping
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="emptyGroupText-header"></a>
                        <b>emptyGroupText</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The text to display when there is a... 
                            </div>
                            <div class="long">
                                The text to display when there is an empty group value
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            GroupingView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">