- Sencha Touch Tutorial
- Sencha Touch - Home
- Sencha Touch - Overview
- Sencha Touch - Environment
- Sencha Touch - Naming Convention
- Sencha Touch - Architecture
- Sencha Touch - MVC Explanation
- Sencha Touch - First App
- Sencha Touch - Build Application
- Sencha Touch - Migration Steps
- Sencha Touch - Core Concepts
- Sencha Touch - Data
- Sencha Touch - Theme
- Sencha Touch - Device Profile
- Sencha Touch - Dependencies
- Environment Detection
- Sencha Touch - Events
- Sencha Touch - Layout
- Sencha Touch - History & Support
- Sencha Touch - Upload & Download
- Sencha Touch - View Components
- Sencha Touch - Packaging
- Sencha Touch - Best Practice
- Sencha Touch Useful Resources
- Sencha Touch - Quick Guide
- Sencha Touch - Useful Resources
- Sencha Touch - Discussion
Sencha Touch - Data View
Description
This is to create multiple views dynamically based on the store values. We use data view basically when we want to show the same component multiple times.
Syntax
Following is the simple syntax to create a data view.
Ext.create('Ext.DataView', {})
Example
Following is a simple example showing the usage.
<!DOCTYPE html> <html> <head> <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" /> <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"> </script> <script type = "text/javascript"> Ext.application({ name: 'Sencha', launch: function() { var touchTeam = Ext.create('Ext.DataView', { fullscreen: true, store: { fields: ['name', 'age'], data: [ {name: 'Greg', age: 100}, {name: 'Brandon', age: 21}, {name: 'Scott', age: 21}, {name: 'Gary', age: 24}, {name: 'Fred', age: 24}, {name: 'Seth', age: 26}, {name: 'Kevin', age: 26}, {name: 'Israel', age: 26}, {name: 'Mitch', age: 26} ] }, itemTpl: '{name} is {age} years old' }); } }); </script> </head> <body> </body> </html>
This will produce following result −
sencha_touch_view_components.htm
Advertisements
To Continue Learning Please Login
Login with Google