Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using Components

Page of 168

Most of the visual classes you interact with in Sencha Touch are Components. Every Component in Sencha Touch is a subclass of Ext.Component, which means that they all support a common set of configuration properties, runtime properties, methods, and events.

A component dynamically outputs a <div> element.

Configs that you will typically apply to a component include the following:

Config Property Description
cls String. The name of a CSS class to apply to the component.
contentEl Ext.Element/HTMLElement/String. The contents of an HTML DOM element with the specified ID to be displayed inside of the component.
data Array/Object. An initial set of data to be processed through an Ext.XTemplate and output as markup.
disabled Boolean. Enables/Disables a component.
height Number/String. The height of the component, must be a valid CSS length value, e.g: 300, 100px, 30%
hidden Boolean. Hides/Shows the component.
hideAnimation String/Mixed. Animation effect to apply to the component when it is hidden. Options include 'fadeOut', 'slideOut'
margin The margin to use on this Component. Can be specified as a number (in which case all edges get the same margin) or a CSS string like '5 10 10 10'
html String/Ext.Element/HTMLElement. Optional HTML content to render inside this Component, or a reference to an existing element on the page.
styleHtmlContent Boolean. true to automatically style the HTML inside the content target of the component.
tpl An Ext.XTemplate definition that uses special markup to loop through a data structure and generate HTML.
width Number/String. The width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%

Note: The following examples that demonstrate using Ext.Component have the following style class defined:

.colorize {
 border: 1px dotted red;
 background-color: yellow;
}

Instantiating a Component with a CSS Class

The following example instantiates a component into a viewport, rendering "Hello World" as its output:

Using Ext.Component to output HTML
Ext.Viewport.add(
 {
  xtype: 'component',
  html: 'Hello World',
  cls: 'colorize',
  width: 200,
  height: 100
 }
);

Styling HTML

Typically you will want to assign the styleHtmlContent: true property to your component if you are using it to output HTML as illustrated below. Note that by applying this configuration attribute, the markup styles more closely align with default browser behavior and add a margin to the component.

Using styleHtmlContent:true
Ext.Viewport.add(
 {
  xtype: 'component',
  html: 'Hello World',
  cls: 'colorize',
  styleHtmlContent: true,
  width: 200,
  height: 100
 }
);

Consuming Content from the Index Page

Use the contentEl property to direct the component to output the contents of a DOM element. In this example, assume that the index.html page contains the following markup:

<div id="myContent" style="display:none">
<strong>Hello World</strong>
</div>

Using contentEl to display innerHTML items
Ext.Viewport.add(
 {
  xtype: 'component',
  contentEl: 'myContent',
  cls: 'colorize',
  styleHtmlContent: true,
  width: 200,
  height: 100
 }
);

Using an XTemplate

Generating Markup from Templates

Use the tpl property to define an XTemplate that generates markup from a Javascript data structure as illustrated by the following example:




Ext.Viewport.add(
 {
  xtype: 'component',
  itemId: 'mycomponent',
  tpl: 'Hello to {firstName} {lastName}',
  cls: 'colorize',
  width: 200,
  height: 100,
  styleHtmlContent: true
 });
 
 // define a sample data object
 var myData = {
  firstName: 'Steve',
  lastName: 'Drucker'
 };
 
 // get a pointer to the component instance
 var myCmp = Ext.ComponentQuery.query('#mycomponent')[0];
 
 // transmit data to the component and process through the template
 myCmp.setData(myData);

Note the following:

  • XTemplate field placeholders are defined by curly braces { }
  • You can use the Ext.ComponentQuery.query() method (covered in detail later in this course) to use define a pointer to a component instance by using CSS selector syntax

XTemplates are covered in detail later in this course.

Page of 168
comments powered by Disqus