Sencha Touchは注意すべき点を開発した.

9176 ワード
httml 5 モバイル開発 Phone Gap Sencha-touch
Sencha Touchは注意すべき問題を開発しました.現在、Sencha Touchは2.4にアップグレードされ、機能がより強く、性能も向上しています.しかし、いくつかの機能の改善により、ドキュメントがタイムリーに更新されず、開発時にいくつかの困難に直面します.私が使った経験と合わせて注意すべき点をまとめて、皆さんの役に立つことを願っています.Sencha Touchの開発プロセスでSDKをダウンロードし、Sencha Cmdをインストールします.プロジェクトを作成するには
sencha generate app MyApp ../test

プロジェクトのパッケージング(導入が容易な圧縮)
sencha app build

cmdで生成されたプロジェクトはクラスライブラリファイルを自動的にロードし、ファイルが多すぎて待機時間が長すぎます.
resources/css/senchaを直接導入することができる.cssとsencha_touch_all.jsは速度を上げ、
ただし、梱包時に復元する必要があります.そうしないとエラーが発生します.
ルートディレクトリの下のapp.jsはプログラムのエントリファイルで、コードは以下の通りです.
Ext.application({
    name: 'MyApp', //The name is used to create a single global namespace for your entire app

    requires: [
        'Ext.MessageBox',
        'Ext.navigation.View',
        'Ext.dataview.List',
        'Ext.plugin.PullRefresh',
        'Ext.plugin.ListPaging'
    ],

    controllers:[
        'Main'
    ],

    views: [
        'Main',
        'ArticleList'
    ],

    models:[
        'MyApp.model.Article'
    ],

    stores:[
        'MyApp.store.Articles'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/[email protected]',
        '144': 'resources/icons/[email protected]'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

使用するコンポーネントはすべてrequiresに導入する必要があります.そうしないと、JSデバッガに警告が表示されます.
Sencha TouchはMVC構造を採用し、すべてのcontroller、model、store、viewファイルはここで導入する必要がある.
実際のファイルがappフォルダの下に保存されている対応するディレクトリ
-------------------------------------
カスタムコンポーネントはextendプロパティのほか、configの下に書く必要があります.
Ext.define("MyApp.model.Article", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            {name: "title", type: "string"},
            {name: "content",  type: "string"},
            {name: "add_time", type: "string"}
        ]
    }
});

Ext.define('MyApp.store.Articles',{
    extend:'Ext.data.Store',
    config:{
        model: "MyApp.model.Article",
        proxy: {
            type: "ajax",
            url : listUrl,
            reader: {
                type: "json",
                rootProperty: "root"
            }
        },
        autoLoad: true,
        pageSize:10,
        listeners:{
            'beforeload':function(store){
                //console.log('start');
                if(store.getAllCount()==0){
                    showMask();
                }
            },
            'load':function(){
                hideMask();
            }
        }
    }
});

----------------------------------
cardレイアウトはページの切り替えアニメーションを構成できます
Ext.create('Ext.Panel',{
layout:{
    type:'card',
    animation:'fade'
},
items:[
    {
    .....
    },
    {
    .....
    }
 ]
});

----------------------------------
Ext.dom.Elementは、Ext.Elementと同じく、Sencha Touchパッケージのdomオブジェクトであり、
通常のdomをさらにカプセル化し、domオブジェクトにいくつかの新しい方法を追加します.
//   id    ，  Ext.Element  
var el = Ext.get("my-div");
//   HTMLElement    ，  Ext.Element  
var el = Ext.get(myDivElement);

//HTMLElement    dom  

//Ext.Element     img     (HTMLElement)
el.query('img');

//Ext.Element      img       (HTMLElement)
el.down('img',true);

//      (Ext.dom.Element)
el.down('img');

//Ext.dom.Element    
el.applyStyles({
    color:'red'
});

//  HTMLElement    
el.style.width = '100%';

----------------------------------- 
//  loading
Ext.Viewport.setMasked({
    xtype:'loadmask',
    message:'   ...'
});

//  loading      unMask?   
Ext.Viewport.unmask();

//     
Ext.Viewport.setMasked(false);

-----------------------------------
ドキュメント内のメソッドは緑の右矢印でCHAINABLEを表し、jQueryのようなチェーン構文をサポートします.
------------------------
paintedイベント
Fires whenever this Element actually becomes visible (painted) on the screen
このイベントはdomロードが完了したときに発生します.
----------------------------------
レイアウトを使用する場合は、親要素がlayoutプロパティを構成しない場合(デフォルトはautoレイアウト)に注意してください.
サブエレメントには高さが必要です.そうしないと、高さが0になる可能性があります.
cardレイアウトの例:
var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.setActiveItem(1);

各レイアウトではdocked(ドッキング)プロパティがサポートされています.
dockedプロパティを活用すると、複雑なレイアウトを簡単に作成できます.
Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top', //   top bottom right left
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

packとalignはレイアウトの2つの補助定義項目であり、packは現在のレイアウト次元の特性を表し、alignは逆である.
例えばhboxレイアウトでは、packの定義は水平方向の特性を表し、alignは垂直方向の特性を表す.
layout: {
    type: 'hbox',
    align: 'start', //          
    pack: 'start' //          ，       
},

align pack    ：
start   
center     
end
justify     （            ）

wordレイアウトの4つの配置方法として理解できます.
左揃え
右揃え
中央揃え
両端揃え
コンテナのレイアウトの取得
var layout = container.getLayout();

-----------------------------------------
スクロールプロパティの説明.
各コンテナはscrollable:trueを構成することでスクロールを実現できます.
ただし、子要素がスクロールされている場合は、親要素がスクロールできません.そうしないと、スクロールバーが競合する可能性があります.
-----------------------------
コントローラを使用すると、コードがきれいになり、読み取り可能になります.次の例では、controllerの使用を示します.
Ext.define('MyApp.controller.Sessions', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            loginForm: 'formpanel' //       xtype 
        },
        control: {
            'formpanel button': { //        css        
                tap: 'doLogin' //        
            }
        }
    },

    doLogin: function() {
        var form   = this.getLoginForm(), //  refs  loginForm    getLoginForm  

            values = form.getValues();

        MyApp.authenticate(values);
    }
});

-----------------------------------
コンポーネントクエリー(ComponentQuery)は、コンポーネントクエリーを使用してCSSセレクタのように使用できます.
アプリケーションのコンポーネントを取得し、この強力な機能をいくつかの例で示します.
//       panel
Ext.ComponentQuery.query('panel[cls=my-cls]')

//    
Ext.ComponentQuery.query('panel[cls~=my-cls]')
//    
Ext.create('My.Panel', {
    cls : 'foo-cls my-cls bar-cls'
});

//  id  
Ext.ComponentQuery.query('#myCt panel');

//      
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

//      
Ext.ComponentQuery.query('gridpanel, treepanel');

//       
var disabledFields = myFormPanel.query("{isDisabled()}");

//isDisabledのような方法はいくつかありますが、ブールタイプを返す場合は、
//クエリーパラメータ、また、queryメソッドはExt.ComponentQueryだけでなく、コンテナコンポーネントごとに使用できます.
//クエリはmyFormPanelのサブエレメントで実行され、Ext.ComponentQuery.queryのクエリー範囲はグローバルです
--------------------------------
//profileを使用すると、異なるデバイスに異なるインタフェースを作成し、同じmodelとstoreを共有できます.
//現段階ではこのような機能を実現する必要がないので、研究しない
//一部のコンポーネントの初期化方法の実行順序:
Controller#init functions called
Profile#launch function called
Application#launch function called
Controller#launch functions called

//初期化ロジックを合理的に実行するには、この順序を使用します.
2017-1-6
Junit 4クイックスタート