Sencha の基本は、html と css を駆使しなくても、簡単に iPhone や Android っぽい ページ(の見かけ)が作れることです。動作は別に定義します。 まずはサンプルとしてログインフォームを作ってみます。

前提として、既に "sencha generate app" コマンドなどで、いじれる Sencha アプリができているものとします。 いじるのは app/view/Main.js です。 また、参考にするのは Sencha Touch サーバーを立てたら入っている Kitchen Sink サンプルです。

app/view/Main.js を書き換えます。

Ext.define('Funini.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
        'Ext.form.FieldSet',
    ],
    id: 'mylist',
    config: {
        items: [
            {
                xtype: 'fieldset',
                id: 'fs1',
                title: 'Form no test',
                instructions: 'kerokero',
            },
        ],
    },
});

こんな感じです。

この読み方ですが、"extend:" というところに書いてある "Ext.form.Panel" というクラスを継承して、 いろいろと必要な情報を書いているかんじです。 "items:" のところに、このパネルに入れるものを書きます。 今はとりあえず "fieldset" が一つだけ入っています。

入れ物 (Panel) ができたので、ここに色々な部品をつめていきます。 一つ目が一番大事です。
まずはボタンです。 Kitchensinkのボタンのサンプルを参考にしながら、一番シンプルなボタンを追加してみます。

Ext.define('Funini.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
        'Ext.form.FieldSet',
    ],
    id: 'mylist',
    config: {
        items: [
            {
                xtype: 'fieldset',
                id: 'fs1',
                title: 'Form no test',
                instructions: 'kerokero',
            },

            {
                xtype: 'button',
                id: 'btn_ok',
                text: 'OK',
            },

        ],
    },
});

こんな感じです。ボタンが出来ました。押せます。

押しても何も起きません。 ここで、ボタンを識別しているのは、"xtype" という部分です。 button は標準部品なので、なにも requires しなくてもいいですが、 自分で作った部品とか、拡張部品を使う場合は requires で指定して、 欲しい xtype が使えるようにします。

フォームっぽくするために、入力出来る場所を作ってみます。

Ext.define('Funini.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
        'Ext.form.FieldSet',
    ],
    id: 'mylist',
    config: {
        items: [
            {
                xtype: 'fieldset',
                id: 'fs1',
                title: 'Form no test',
                instructions: 'kerokero',
            },

            {
                xtype: 'textfield',
                name: 'name',
                label: 'Name',
            },

            {
                xtype: 'button',
                id: 'btn_ok',
                text: 'OK',
            },
        ],
    },
});

入力できるようになりました。

HTML で書くときには、テーブルで、ラベルとテキストボックスは別で... とか考えないといけないところ、一つの部品で見出しと本体と どっちも書けて楽です。

パスワード入力部分も作ってみます。 こんどは requires にも追記が要ります。 あと、いくつかのラベルをログイン画面のフォームっぽくしてみました。

Ext.define('Funini.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
        'Ext.form.FieldSet',

        'Ext.field.Password',

    ],
    id: 'mylist',
    config: {
        items: [
            {
                xtype: 'fieldset',
                id: 'fs1',
                title: 'ログイン',
                instructions: 'ID とパスワードを入力して、ログインボタンを押して下さい。',
            },
            {
                xtype: 'textfield',
                name: 'name',
                label: 'ID',
            },

            {
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password',
            },

            {
                xtype: 'button',
                id: 'btn_ok',
                text: 'OK',
            },
        ],
    },
});

表示するとこんな感じです。

これでだいぶアプリっぽくなりました。何も動きませんが...