# E-UI

**Repository Path**: balabalabu6/e-ui

## Basic Information

- **Project Name**: E-UI
- **Description**: E-UI，如喜欢可加入到自己项目包中免费使用，后续会逐步完善，文档及说明请看http://114.115.155.97/
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://114.115.155.97
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-15
- **Last Updated**: 2023-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: extjs

## README

# E-UI

#### 目录说明
| 名称  | 说明  |
| ------------ | ------------ |
| modules  | 项目代码  |
| --manager  | 后端管理代码  |
| --Examples | 示例工程代码 |
| packages  | 资源包存  |
| --Wys  | 主体资源包  |

#### 工程模块说明
1. index.html 系统的首页:加载样式表、核心库、app,js
2. app.js 命名空间、加载插件、指定app的主目录、加载控制层、创建主视图
3. app Extjs程序的主程序文件夹
 a）view：所有的视图组件、控制器(Controller)、视图模型(ViewModel)
 b）store：所有的储存数据源组件
 c）model：所有的数据模型组件
 e）其他自定义组件/工具：lib/util（可选，例如自定义全局校验工具类、静态数据）
 

每个应用都有一个实体，就是**Application**对象，而每个应用同样采用单一入口结构，有个快捷函数就是**Ext.application({config})**，创建一个Application对象实例，并且运行它。Application在创建之初，会去加 载Controller类，加载完毕后，会正式的lunch。
**Application**在lunch的时候，会创建一个Viewport实例，这个东西就像一个骨架一样，上面可以拼装各种View，具体说，就是各种布局形式和窗体控件，可以说是view界面的载体，一个页面只能有一个Viewport实例。

**View**纯粹是一个界面组件，或者说窗体控件的集合（比如form,grid和window）。通过Store来加载数据并且展现到界面上，界面控件的响应都写在Controller里面，View对Controller的存在一无所知，也没有代码上的依赖

**ViewModel**是一个管理特定UI组件数据的类。封装了view（视图）所需的展示逻辑，绑定数据到view并且每当数据改变时处理更新。

**Controller**的角色完全是个粘合剂，它在加载之初，会帮忙加载跟其有关的Model，Store，View类，而其真正的作用，是通过一系列的事 件处理函数(比如点击保存按钮)
，确定了每个View上面界面组件对用户交互行为的响应方法，可以说是一堆事件处理器函数的集合；这里面主要通过一个 control成员函数来进行事件绑定，通过另一个叫ComponentQuery的组件，使用类似css selector的语法来定位界面上的组件，并为其绑定事件处理器。

**Model**是对抽象数据的具体化，简单理解就是数据库里面的一行记录。

**Store**是对通过网络加载数据的过程的一个抽象，Store通过data发送请求(一般为ajax请求)到后台获取数据(一般返回json格式)，Store依赖于Model，通过关联的Model对象才知道如何将取回的数据对象化。

------------


**如有疑问可提交到Issues**

#### 使用方法
直接运行此项目首先在群文件中下载对应版本的CMD安装包以及对应版本的SDK，将SDK解压到项目跟目录中，执行sencha app watch 命令等待成功启动即可访问;完整目录结构如下：

	projectName
		ext
		modules
		packages
	
原有项目中没有包的情况下，进入到您的项目目录执行：

```
sencha generate package 包名称
```
后将本包下的classic下的 overrides\sass\src 拷贝到对应的classic下，以及resources目录拷贝进入
注：包名最好保持一直Wys减少加入后修改内容过多。也可自行修改。怎么开心怎么弄就好。

构建包命令：

```
sencha package build
```


都加入以后切记要在你项目的app.json 中引入包。例如：

```
"requires": [
        "Wys"
    ],
```
最终执行 

```
sencha app build
```
即可

####其他命令
1：创建工作区 
```
sencha -sdk sdkFolderPath generate workspace ./
```
工作空间管理(Workspance Management)
Sencha Cmd可以管理和维护ExtJS框架、包、自定义代码
2：创建独立包
```
sencha generate package [packageName]
```
3：创建项目
```
sencha -sdk ./ext generate app --ext --classic [项目名称] ./modules/[目录名称]
```

#### 部分界面展示
·系统登录界面
![登录界面](https://images.gitee.com/uploads/images/2019/0923/162401_e31edcb5_355138.jpeg "TIM截图20190923162339.jpg")、


·按钮样式
![按钮](https://images.gitee.com/uploads/images/2019/0923/163832_0bcb73d0_355138.jpeg "按钮.jpg")

·表单类
![表单](https://images.gitee.com/uploads/images/2019/0923/163853_7bfc36d1_355138.jpeg "简单表单.jpg")
![表单](https://images.gitee.com/uploads/images/2019/0923/163909_0098afcd_355138.jpeg "表单高级.jpg")

·附件展示及预览
![附件展示，课在线展示图片、视频、音频、文档](https://images.gitee.com/uploads/images/2019/0923/163928_3b009593_355138.jpeg "图片文件预览.jpg")

![图片展示效果](https://images.gitee.com/uploads/images/2019/0923/164013_6759e293_355138.jpeg "图片文件预览2.jpg")



#### 问题及反馈意见
    QQ群：737135227，邮箱：804253217@qq.com

#### 下一步计划
1: 实现日历面板

2: 实现可合并单元格的grid组件

3：目前代码优化、完善