SecondPage master

原创于 2014-08-06 22:01:47 发布 · 267 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Ext.js库构建一个用于创建应用的启动窗口，包括窗口的基本配置、布局设计以及关键组件的实现。

Ext.define('app.view.AppNewStartWindow',{
    extend : 'Ext.window.Window',
    alias : 'widget.appNewStartWindow',
    title : '创建应用',
    height : 450,
    width: 430,
    autoShow : false,
    layout : 'fit',

    initComponent : function(){
         this.items=[{
           xtype : 'panel',
           layout : 'border',
           items : [{
               xtype : 'form',
               region: 'north',
               layout : 'hbox',
               items :[{
                   xtype : 'textfield',
                   fieldLabel: 'bindmiddleware'
               },{
                   xtype : 'textfield'
               }]

        },{
                   xtype : 'form',
                   region : 'center',
                   height : 200,
                   items :[{
                       xtype :'textfield'
                   },{
                       xtype : 'grid',
                       title: 'Simpsons',
                        store: {
                           fields:['name', 'email'],
                              data:[
                                { 'name': 'Lisa', "email":"lisa@simpsons.com"},
                                { 'name': 'Bart', "email":"bart@simpsons.com"},
                                { 'name': 'Homer', "email":"home@simpsons.com"},
                                { 'name': 'Marge', "email":"marge@simpsons.com", }
                            ]
                        },
                        columns: [
                            { header: 'Name', dataIndex: 'name' },
                            { header: 'Email', dataIndex: 'email', flex: 1 }
                        ],
                        height: 340
                   }]
               },{
                   xtype :'toolbar',
                   region : 'south',
                   items : [{
                       xtype : 'button',
                       text : 'next',
                       action : 'next'
                   }]
                   }]
         }];

        this.callParent(arguments);
    }
})