view release on metacpan or  search on metacpan

share/docs/source/ListView.html  view on Meta::CPAN

 * <li>resizable columns</li>
 * <li>selectable</li>
 * <li>column widths are initially proportioned by percentage based on the container
 * width and number of columns</li>
 * <li>uses templates to render the data in any required format</li>
 * <li>no horizontal scrolling</li>
 * <li>no editing</li>
 * </ul></div>
 * <p>Example usage:</p>
 * <pre><code>
// consume JSON of this form:
{
   "images":[
      {
         "name":"dance_fever.jpg",
         "size":2067,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/dance_fever.jpg"
      },
      {
         "name":"zack_sink.jpg",
         "size":2303,
         "lastmod":1236974993000,
         "url":"images\/thumbs\/zack_sink.jpg"
      }
   ]
}
var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

var listView = new Ext.list.ListView({
    store: store,
    multiSelect: true,
    emptyText: 'No images to display',
    reserveScrollOffset: true,
    columns: [{
        header: 'File',
        width: .5,
        dataIndex: 'name'
    },{
        header: 'Last Modified',
        width: .35,
        dataIndex: 'lastmod',
        tpl: '{lastmod:date("m-d h:i a")}'
    },{
        header: 'Size',
        dataIndex: 'size',
        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
        align: 'right'
    }]
});

// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
    id:'images-view',
    width:425,
    height:250,
    collapsible:true,
    layout:'fit',
    title:'Simple ListView <i>(0 items selected)</i>',
    items: listView
});
panel.render(document.body);

// little bit of feedback
listView.on('selectionchange', function(view, nodes){
    var l = nodes.length;
    var s = l != 1 ? 's' : '';
    panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
});
 * </code></pre>
 * @constructor
 * @param {Object} config
 * @xtype listview
 */
Ext.list.ListView = Ext.extend(Ext.DataView, {
<span id='Ext-list-ListView-property-disableHeaders'>    /**
</span>     * Set this property to &lt;tt&gt;true&lt;/tt&gt; to disable the header click handler disabling sort
     * (defaults to &lt;tt&gt;false&lt;/tt&gt;).
     * @type Boolean
     * @property disableHeaders
     */
<span id='Ext-list-ListView-cfg-hideHeaders'>    /**
</span>     * @cfg {Boolean} hideHeaders
     * &lt;tt&gt;true&lt;/tt&gt; to hide the {@link #internalTpl header row} (defaults to &lt;tt&gt;false&lt;/tt&gt; so
     * the {@link #internalTpl header row} will be shown).
     */
<span id='Ext-list-ListView-cfg-itemSelector'>    /**
</span>     * @cfg {String} itemSelector
     * Defaults to &lt;tt&gt;'dl'&lt;/tt&gt; to work with the preconfigured &lt;b&gt;&lt;tt&gt;{@link Ext.DataView#tpl tpl}&lt;/tt&gt;&lt;/b&gt;.
     * This setting specifies the CSS selector (e.g. &lt;tt&gt;div.some-class&lt;/tt&gt; or &lt;tt&gt;span:first-child&lt;/tt&gt;)
     * that will be used to determine what nodes the ListView will be working with.
     */
    itemSelector: 'dl',
<span id='Ext-list-ListView-cfg-selectedClass'>    /**
</span>     * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
     * &lt;tt&gt;'x-list-selected'&lt;/tt&gt;). An example overriding the default styling:
    &lt;pre&gt;&lt;code&gt;
    .x-list-selected {background-color: yellow;}
    &lt;/code&gt;&lt;/pre&gt;
     * @type String
     */
    selectedClass:'x-list-selected',
<span id='Ext-list-ListView-cfg-overClass'>    /**
</span>     * @cfg {String} overClass The CSS class applied when over a row (defaults to
     * &lt;tt&gt;'x-list-over'&lt;/tt&gt;). An example overriding the default styling:
    &lt;pre&gt;&lt;code&gt;
    .x-list-over {background-color: orange;}
    &lt;/code&gt;&lt;/pre&gt;
     * @type String
     */
    overClass:'x-list-over',
<span id='Ext-list-ListView-cfg-reserveScrollOffset'>    /**