ExtJs 思维导图

搭建环境:

 

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

———————————————————————— 让科技和智能使人更便捷 --- 从我做起 ————————————————————————
原文地址:https://www.cnblogs.com/xiaoxuebiye/p/6826433.html