ExtJs 思维导图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

搭建环境：

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

启用ExtJs

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

2.引用你的 js

一切从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删除数据
*