1. Working Draft
    • Working Drafts no longer in development
    • Working Drafts in development
    • Working Drafts in Last Call
  2. Candidate Recommendations
  3. Proposed Recommendations
  4. Recommendations

Working Draft

Working Drafts in Last Call

The TR is almost completion as a Draft

Candidate Recommendations

The TR is almost completion as a technical report

Proposed Recommendations

Wating approval from the relevant parties


It is completed as a technical report



Prefetch for DNS

resolve DNS when browser is idled.

<link rel="dns-prefetch" href="">

You can also control(opt in / our) prefetch by using meta tag

meta tag

<meta http-equiv="x-dns-prefetch-control" content="on">

Prefetch contents or page

preload contents when current page is loaded fully.


<link rel="prefetch" href="">


<link rel="prefetch" href="">

Prefetch content (high priority)

This is supported in Google Chrome.

<link rel="subresource" href="jquery.js">

Chronium project says that

“LINK rel=subresource” provides a new link relation type with different semantics from LINK rel=prefetch. While rel=prefetch provides a low-priority download of resources to be used on subsequent pages, rel=subresource enables early loading of resources within the current page. Because the resource is intended for use within the current page, it must be loaded at high priority in order to be useful.

Prerender page

Currently prerendering tag is only supported in Google Chrome. suppecification

<link rel="prerender" href="">


Prerendering may make your site slowly. so you had better define height relative page ( e.g. next page).


What are these?

OOCSS(Object-Oriented CSS) and SMACSS(Scalable and Modular Architechture for CSS) are concept that help us to reuse html components.

OOCSS was proposed by Nicole Sullivan, SMACSS was proposed by Jonathan Snook.

What are these concept?

Once create html objects and can be reused into the site.

  • We have to sepalate some components in html elements e.g. (headings, lists, text treatments and links, containers, media, grids, and template.)
  • We will make style each components.
  • It make components reduce dependence in html elements.


  • Style become more reusable.
  • CSS size is more less.


  • HTML size is more large. ( Because of using more css classes.) > But it is not important, because file size increasing is smaller than whole of data size.

What I should

    • separete container and contents style.
    • separate structure and skin style.
    • use multi these classes ( container, contents, structure and skin style )
    • separate style following categories > * base -> base css e.g. reset style etc.. > * layout -> divide section. include some modules > * modules -> reusable parts e.g. slidebar ,callouts, button > * state -> how modules or layout is looked in particular state e.g. hover, active, hide, expand, smaller, bigger > * theme -> ditto ( same as above )

What I ought not

  • It should avoid to use ID selector and !important keyword as much as possible. (Because ID selector elements is much stronger than class elements. We can override other style it.)




understand how to create sencha touch plugin


  1. Preparation to develop
  2. Development
  3. Build application
  4. Publishment

Preparation to develop

  1. Create new application
  2. Make ux.touch directory
  3. Add class path to Ext.loader

In this article, explain it by using my plugin. sencha-list-scroll-reset

Create new application

mkdir sencha-list-scroll-reset
sencha -sdk ./sdk-2.1.0 generate app SenchaListScrollReset ./

Make ux.touch directory

make ${APP_DIR}/ux/touch to deploy plugin you create

mkdir -p sencha-list-scroll-reset/ux/touch

* there are some pattern to deploy plugin ux or ux.touch or tux

Add class path to Ext.loader

$ vi sencha-list-scroll-rese/app.js
	'Ext': 'touch/src',
	'Ext.ux.touch': './ux/touch',  // add class path 
	'SenchaListScrollReset': 'app'


outline of plugin

Ext.define('Ext.ux.touch.ListScrollReset', {

    requires: [

    alias: 'plugin.listscrollreset',
    config: {

    constructor: function(config) {

    init: function (component) {

    hoge: function(){

set alias

You have to set alias as plugin.XXXX

Ext.define('Ext.ux.touch.ListScrollReset', {

	requires: [

	alias: 'plugin.listscrollreset',

Plugin is created to inherit Ext.plugin.Plugin by setting plugin.XXX alias

refer to Ext.Component.applyplugins


parameter (component) is passed init function is reference to component which is include that plugin

init: function (component) {
	// componentが読み込んだコンポーネント

Include plugin

include plugin to set plugin.xclass propetry in component configuration which you want set plugin to.

config {
	plugins: [
			xclass: 'Ext.ux.touch.ListScrollReset',
			toolbarItemId : 'main-toolbar',
			listItemId: 'main-list',
			scrollAnim: {duration: 5000}


  1. set class path to build command
  2. build!!


If you excute build command without setting class path following error occur.

Failed to find file for Ext.ux.touch.ListScrollReset

Set class path to build command

cd sencha-list-scroll-reset
vi .sencha/app/sencha.cfg
app.classpath=${app.dir}/app.js,${app.dir}/app,ux // ←set "ux" directory

Excute build

cd sencha-list-scroll-reset
sencha app build production

Publishment (github / sencha market)

  1. in github
  2. in sencha market

Publishment in github

  • push application to github repository
  • It is better to deploy sample.

Publishment in sencha market

  • About it
  • Submit

About it

senchamarket top


Enter those information * name * description * screenshot * license

regist plugin

Apply (Under examination)


Apply (Approval)





There are so many custom components for sencha touch.

If you want to use those awsome custom components in your app, you should add some configations in app.js and .sencha when developing or build apps.

How to…

When developing

At first, You download costom component and add ux folder you downloaded to application folder.

When you develop app by using custom components, you should add configation in app.js.

Ext.ux.touch : ‘./ux/touch’

This is adding Ext.ux.touch class path.

	'Ext': 'touch/src',
	'Ext.ux.touch': './ux/touch',  // add Ext.ux.touch class path
	'MultistateButton': 'app'

when building

When you build your app use Ext.ux.touch custom components, you add following configation in .sencha/app/sencha.cfg. This is adding Ext.ux.touch class path to build tool
app.classpath=${app.dir}/app.js,${app.dir}/app,ux // add "ux" folder path

If you don’t add this configation, the following error is occured.

Failed to find file for Ext.ux.${component name}