[Extjs6]如何使用senchacmd創建項目及如何啟動修改項目創建新的界面

創建項目Admin

本次是使用ext6.0.2的sdk創建以下項目.

使用sencha -sdk ./XXX generate app -s ./XXXX/templates/XXX Admin ./Admin命令。
這裡寫圖片描述

修改項目配置文件 app.json

在項目的根目錄有app.json文件,需要修改其中output的base屬性,具體如下圖所示:

 "output": {
        //"base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",
        "base":"${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
        "page": "../index.html",
        "manifest": "../${build.id}.json",
        "appCache": {
            "enable": false
        }

這裡寫圖片描述

sencha app watch啟動項目

這裡寫圖片描述

在瀏覽器地址欄輸入localhost:1841查看結果

PC端:
這裡寫圖片描述

移動端:
這裡寫圖片描述

如何去除最上面的一排按鈕?

將toolbar.js文件中的以下部分註釋即可,確定以後不會用到也可刪除。

Ext.define('Admin.view.main.Toolbar', {
    extend: 'Ext.Toolbar',
    xtype: 'maintoolbar',

    requires: [
        'Ext.SegmentedButton'
    ],

    items: [
        {
            // This component is moved to the floating nav container by the phone profile
            xtype: 'component',
            reference: 'logo',
            userCls: 'main-logo',
            html: 'Sencha'
        },
        {
            xtype: 'button',
            ui: 'header',
            iconCls: 'x-fa fa-bars',
            margin: '0 0 0 10',
            listeners: {
                tap: 'onToggleNavigationSize'
            }
        },
        '->',
        /*{
            xtype: 'segmentedbutton',
            margin: '0 16 0 0',
            //defaultUI: 'header',

            platformConfig: {
                phone: {
                    hidden: true
                }
            },

            items: [{
                iconCls: 'x-fa fa-desktop',
                handler: 'onSwitchToClassic'
            }, {
                iconCls: 'x-fa fa-tablet',
                pressed: true
            }]
        },
        {
            xtype:'button',
            ui: 'header',
            iconCls:'x-fa fa-search',
            href: '#searchresults',
            margin: '0 7 0 0',
            handler: 'toolbarButtonClick'
        },
        {
            xtype:'button',
            ui: 'header',
            iconCls:'x-fa fa-envelope',
            href: '#email',
            margin: '0 7 0 0',
            handler: 'toolbarButtonClick'
        },
        {
            xtype:'button',
            ui: 'header',
            iconCls:'x-fa fa-question',
            href: '#faq',
            margin: '0 7 0 0',
            handler: 'toolbarButtonClick'
        },
        {
            xtype:'button',
            ui: 'header',
            iconCls:'x-fa fa-th-large',
            href: '#dashboard',
            margin: '0 7 0 0',
            handler: 'toolbarButtonClick'
        },
        {
            xtype: 'component',
            html: 'Goff Smith',
            margin: '0 12 0 4',
            userCls: 'main-user-name'
        },*/
        {
            xtype: 'image',
            userCls: 'main-user-image small-image circular',
            alt: 'Current user image',
            src: 'resources/images/user-profile/2.png'
        }
    ]
});

這裡寫圖片描述

查看移動端修改後的界面

這裡寫圖片描述

創建一個新的View->TestView.js

Ext.define('Admin.view.base.TestView',{
    extend:'Ext.tab.Panel', 
    xtype: 'testview',

    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'fa fa-home redIcon',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'fa fa-user',
            html: 'Contact Screen'
        }
    ]
});

這裡寫圖片描述

為TestView.JS創建菜單

            {
                text: 'TestView',
                iconCls: 'x-fa fa-send',
                rowCls: 'nav-tree-badge nav-tree-badge-hot',
                viewType: 'testview',
                leaf: true
            },

這裡寫圖片描述

查看顯示效果

這裡寫圖片描述

這裡寫圖片描述

下面介紹如何修改樣式

這裡寫圖片描述

1.修改TestView.js

這裡寫圖片描述

2.創建樣式redIcon
這裡寫圖片描述

3.修改後的界面
這裡寫圖片描述

總結

以上基本上包含瞭創建項目所遇到的問題,然後創建瞭一個demo去演示,及最後簡單說明如何修改一些樣式。

發佈留言