Clear Up
SharpKit Reference

View Class

A mechanism for displaying data using custom layout templates and formatting.

The View uses an Ext.XTemplate as its internal templating mechanism, and is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model. In order to use these features, an itemSelector config must be provided for the View to determine what nodes it will be working with.

The example below binds a View to a Ext.data.Store and renders it into an Ext.panel.Panel.

  
    Ext.define('Image', {
            extend: 'Ext.data.Model',
            fields: [
            { name:'src', type:'string' },
            { name:'caption', type:'string' }
            ]
            });
            Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: 'Image',
            data: [
            { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
            { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
            { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
            { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
            ]
            });
            var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
            '<img src="{src}" />',
            '<br/><span>{caption}</span>',
            '</div>',
            '</tpl>'
            );
            Ext.create('Ext.view.View', {
            store: Ext.data.StoreManager.lookup('imagesStore'),
            tpl: imageTpl,
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            renderTo: Ext.getBody()
            });
            

Namespace: Ext.view

Constructors

Methods

Name Description
clearHighlight() Un-highlights the currently highlighted item, if any.
highlightItem(object) Highlights a given item in the View. This is called by the mouseover handler if overItemCls and trackOver are configured, but can also be called manually by other code, for instance to handle stepping through the list via keyboard navigation.
© Copyright 2005-2011 SharpKit. All rights reserved.