ExtJs 思维导图

Posted 2020-09-17 张 永 一个梦想自由的程序员

 

 

搭建环境：

 

1. 建tomcat , eclipse
2. 复制 Extjs 到 项目的 webcontent下
（建议用自己一个熟悉的Extjs版本，我用Ext JS 4.2）， 备份一个ext目录，新项目直接复制。

 

启用ExtJs

1. 在html / head里 包含主要的几个js

<link rel="stylesheet" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/ext-all-debug.js" ></script>
<script type="text/javascript" src="./ext/locale/ext-lang-zh_CN.js" charset="utf-8"></script>

2.引用你的 js

<script type="text/javascript" src="./main.js" ></script>

一切从main.js 里的 Ext.onReady(function() {} )

开始

3. 示例
Ext.onReady(function() {
Ext.Msg.alert(\'提示\', \'逗号分隔参数列表\'); //这种方式非常常见的
});

 

调试建议：

1. 准备 浏览器 chrome 或 火狐 f12键 可以看 js 的运行情况

2. 在代码关键处 加
console.log( \'initData \' );
alert()
这样可以在调试的时候发现js运行的情况。
建议用 log, 输出到浏览器 f12的一个窗口

 

ExtJs 几大要素：

 

一个程序（页面），可以分三个要素： 界面UI, 数据， 按钮事件（function）.
用专业的属于叫 VMC。
不管用一个文件实现还是，三个文件实现。脑子里有这个逻辑概念就好。 在代码编写观众中， 有意识的，区分处理。这样整个程序框架比较好维护好阅读。

我个人整理了一个思路： 仅做参考
/*
* 本页面分 三个部分
*
* 第一部分数据类的，比如model 定义 store 定义 界面内的使用变量定义
*
* 第二部分就是画界面的部分， 界面定义及绘画过程该部分完成，代码里有的按钮事件 如果涉及到业务处理超过 5 行，单独形成函数处理
*
* 第三部分就是业务处理， 所有业务相关的处理函数都独立处理
*
* 编码规范：
* 关键panel ,grid ,form 需要命名，格式 id命名为 id_panelXXXXX
* Store 命名 storeXxxxx ,id 为id_storeXxxxx
* 业务函数命名 fnAddXxxxx fnEditXxxxx, 分支函数 用 handleXxxxx 或 handleXxxxxAction
*
*/

/*
* 经典增删改查界面包含如下 主界面 panelTcpMonitor = toolbar + gird 增加按钮 会显示增加界面 windows +
* panel + 小组件 修改按钮 会显示增加界面 windows + panel + 小组件 删除按钮 无界面 刷新按钮 无界面
*
* 界面创建过程： 1.创建主界面 panelTcpMonitor， 后期用hide + show控制， panelTcpMonitor
* 放置在panelMain里 2.点击增加，创建 panel及里面的小组件， 把panel放置在 windows里弹出 3.点击修改，创建
* panel及里面的小组件，需要把选择的数据带入， 把panel放置在 windows里弹出 4.删除，刷新略过
*
*/

/*
* 经典增删改查页面业务控制 0.标准化数据提交及标准化数据返回 与后台交互会很多，接口标准化很有必要，这个标准化仁者见仁 交互方式： 向服务器发送： a.用
* http的url + cmd = 1001 做为唯一操作编码，例如：localhost:8080/Monitor/Server?cmd=1001
* b.数据内容采用 json , 下附 A1 服务器下发数据： a. 数据格式json, 格式下附A2
*
* 1.刷新 store.reload()
* 2.读取表格数据操作，用store发送请求，并显示
* 3.增加记录， 定义 新的对象， NewWebMon， 转换成json字串， 然后做为请求的内容向后台发送
* 4.编辑记录， 定义 新的对象， NewWebMon， 转换成json字串， 然后做为请求的内容向后台发送
* 5.删除记录， 直接转换 record --> json ， 然后做为请求的内容向后台发送,后台根据id删除数据
*