Sencha SlideNavigation 项目教程

Sencha SlideNavigation 项目教程

1. 项目的目录结构及介绍

sencha-SlideNavigation/
├── app/
│   ├── app.js
│   ├── app.json
│   ├── build.xml
│   ├── cache.manifest
│   ├── index.html
│   ├── packager.json
│   └── resources/
│       └── ux/
│           └── slidenavigation/
├── CHANGES
├── LICENSE
└── README

• app/: 包含应用程序的主要文件和资源。
  • app.js: 应用程序的主入口文件。
  • app.json: 应用程序的配置文件。
  • build.xml: 构建脚本。
  • cache.manifest: 缓存清单文件。
  • index.html: 应用程序的入口页面。
  • packager.json: 打包配置文件。
  • resources/ux/slidenavigation/: 包含滑动导航的自定义组件。
• CHANGES: 项目变更记录。
• LICENSE: 项目许可证文件。
• README: 项目说明文件。

2. 项目的启动文件介绍

app.js

app.js 是 Sencha SlideNavigation 项目的启动文件，负责初始化应用程序并加载必要的组件。以下是 app.js 的主要内容：

Ext.application({
    name: 'MyApp',
    requires: [
        'Ext.ux.slidenavigation.View'
    ],
    launch: function() {
        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'card',
            items: [
                {
                    xtype: 'slidenavigationview',
                    fullscreen: true,
                    items: [
                        {
                            title: 'Home',
                            iconCls: 'home',
                            html: 'Welcome to the Home Screen'
                        }
                    ]
                }
            ]
        });
    }
});

• name: 应用程序的名称。
• requires: 需要加载的组件，这里加载了自定义的滑动导航视图 Ext.ux.slidenavigation.View。
• launch: 应用程序启动时执行的函数，创建并显示主容器和滑动导航视图。

3. 项目的配置文件介绍

app.json

app.json 是 Sencha SlideNavigation 项目的配置文件，包含了应用程序的各种配置选项。以下是 app.json 的主要内容：

{
    "name": "MyApp",
    "theme": "theme-cupertino",
    "classpath": [
        "app",
        "app/model",
        "app/store",
        "app/view",
        "app/controller"
    ],
    "js": [
        {
            "path": "app.js",
            "bundle": true,
            "update": "delta"
        }
    ],
    "css": [
        {
            "path": "resources/css/app.css",
            "bundle": true,
            "update": "delta"
        }
    ]
}

• name: 应用程序的名称。
• theme: 应用程序的主题。
• classpath: 应用程序的类路径。
• js: JavaScript 文件的配置，包括主入口文件 app.js。
• css: CSS 文件的配置，包括应用程序的样式文件 resources/css/app.css。

以上是 Sencha SlideNavigation 项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用该项目。