ExtJs3.x开发与使用心得（学习笔记）

ExtJs3.x开发与使用心得（学习笔记）

项目中的前端技术 大体使用 ExtJs ，同时也用到了bootstraps ,echarts, html辅助实现页面效果

比较全面的extJS3.3使用教程
面板创建，veiwPoint的创建，对话框，弹出框的使用，选项框（tabpanel），动态tab
布局，表单（formPanel），basicForm,表单元素Field,表格（gridPanel），同步树（TreePanel）

https://blog.csdn.net/aa15237104245/article/details/83148242?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

https://blog.csdn.net/sinat_37167645/article/details/79790256?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-37&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-37

在 js页面中使用debugger // 在JS页面中写入debugger代码。
可在页面进入F12 后 使用F10 进入 调试 查看 元素 ，变量的值

        // 弹出框，第一个参数为标题，第二个参数为显示内容
        // Ext.MessageBox.alert('Title','Content text !');

2. 标点符号&quot其实是双引号.

各类文件上传的功能方法（弹窗） frame.util.FileUploadWindow
项目中的路径：F:\svndoc\Project\SLMS\Trunk\SLMS\src\resources\framework\scripts\module\base\host\init.js

这是普通文本 - 这是粗体文本

属性padding对应着4个值，在赋值时按顺时针排列。
如：padding:1px 2px 3px 4px;
表示上袭填充padding-top为1px;
表示右填zd充padding-right为2px;
表示下填充padding-bottom为3px;
表示左填充padding-left为4px;

console.log(records);//record实际上是个数组，所以需要records[0]获取数据

LockManagerPanel.js

var _floorTree = new slms.LocalSinglerTreePanel(floorConfig, floor_callback); //创建一个slms项目中的LocalSinglerTreePanel对象

SinglerTreePanel 为对象树面板,单层树，用来显示楼层名称和楼层的楼层数

extJs3中的右击事件菜单面板属性名：contextmenu:
contextmenu: rightClickMenu: function (node, e) {//右键菜单
console.log(“右键点击事件已触发” + “点击测试” + node.attributes.code); //打印节点信息
var id = node.attributes.id;
var menu = new Ext.menu.Menu({
items: [{
text: “批量启用”,
handler: function batchEnableLock(node) {
//批量启用门锁（根据buildingManagerKey）
console.log(“welcome!右键操作完成” + id);
Ext.Ajax.request({
url: ‘LockManagerAction!batchEnableLock.action’,
params: {
// data : Ext.encode(dataParams) // 参数为多个的时候使用Ext.encode(）方法
data: id // 参数为单个的 常见参数类型 如 id,name。。。可直接传入
}
}),
_lockManagerPanel.fireEvent(“myRefresh”); //刷新面板–表格数据
}
},
{
text: “批量禁用”,
handler: function batchDisableLock(node) {
//批量禁用门锁（根据buildingManagerKey）
console.log(“已进入批量禁用功能模块” + “–楼名key为:” + id);
Ext.Ajax.request({
url: ‘LockManagerAction!batchDisableLock.action’,
params: {
data: id
}
}), _lockManagerPanel.fireEvent(“myRefresh”); //刷新面板–表格数据
}
}
]
});
menu.showAt(e.getXY()) //menu.showAt在指定的位置显示该菜单,e.getXY() 获取当前操作元素的定位坐标（X,Y）
}

menu.showAt(e.getXY()) //menu.showAt在指定的位置显示该菜单,e.getXY() 获取当前操作元素的定位坐标（X,Y）

// EXTjs 学习

1：Ext.Ajax.Request中所有的数据逻辑处理都放在 回调函数中 进行完成 ，此外，所需的变量定义也应在 回调函数中进行定义 以区别
局部变量 与 全局变量 的处理

url:字符串类型，指明请求的地址
params:请求时传递给服务器段的参数，可以是对象，字符串
method:请求的方法，字符串类型，“GET"或者"POST"，注意必须是大写的
success:函数类型，请求成功后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
failure:函数类型，请求失败后会执行的函数，该函数有一个参数，是一个包含服务器端响应数据的XMLHttpRequest 对象
callback:函数类型，无论请求的结果如何都会执行

Panel 属性： （常用属性）

1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
4.bbar:底部条，显示在主体内，//代码：bbar:[{text:‘底部工具栏bottomToolbar’}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:‘顶部工具栏topToolbar’}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:“按钮位于footer”}]
7.buttonAlign:footer中按钮的位置，枚举值为：“left”,“right”,“center”,默认为right
8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题
14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面

Ext.QuickTips.register(
Ext.QuickTips 悬浮提示 学习网址：https://blog.csdn.net/itlwc/article/details/7886927
Ext.QuickTips.init();初始化后就会激活提示功能
disable()禁止组件,
enable()启用组件,
register()为DOM元素注册提示功能,
unregister()取消提示功能
实例：
Ext.QuickTips.init();

	Ext.QuickTips.register({

		target : 'lwc',//给哪个DOM元素注册提示信息

		title : '第一型',
			
		text : '从外部注册到DOM里面的提示信息'
		});

javascript 中 keyup、keypress和keydown事件 学习网址：https://www.cnblogs.com/rsky/p/4355291.html

–》ext中 formpanel与gridpanel 的区别。

formpanel默认的是添加一些form组件，类似于页百面的form，或类似于.net桌面应用开发中的窗体度，如问text,password,combobox等，主要用来进行输入与交互用的；
gridpanel默认的是添加表格grid控件，答类似于桌面应用开发中表格控件，是table的增专强体，主要用户显示表格数据和处理表属格数据的

在extjs中将ajax函数的查询结果集合列表 放入 页面中id(name)为：editCheckInIframe的iframe面板中进行展示与操作
window.editCheckInIframe.vm.getFingerInfo(ret.retList)

---

frame.util.ShowLoadMask(“请稍等”);
Ext.LoadMask遮罩的效果几种实现方式 学习网址：https://www.cnblogs.com/bluestorm/archive/2013/06/14/3136172.html
Ext.LoadMask遮罩的效果几种实现方式
Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果。可以直接应用在元素上，如：

var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id, {
msg : ‘正在删除数据，请稍候。。。。。。’,
removeMask : true// 完成后移除
});
loadMarsk .show(); //显示

然后在处理完成的方法中loadMarsk .hide();

还可以和Ext.data.Store结合，可将效果与Store的加载达到同步，如：

Example1:

var loadMarsk = new Ext.LoadMask(document.body, {
msg : ‘数据处理中!’,
disabled : false,
store : store
});

Example2:

在form的submit方法中有waitMsg属性来达到上面的效果 ,如：

form.submit({
waitMsg : ‘正在提交数据…’

 .....

Example3:

var myMask = Ext.LoadMask(“xxPanel”, {

msg: ‘请稍等，数据正在努力加载中……’

});

---

系统右下角提示框：
frame.util.ShowAutoPopoMsg(“获取长期密码成功!”);

---

Ext.data.JsonStore的使用
　　　　最近在维护一个Ext.js写的贷前服务系统，Ext.data.JsonStore相当于前台页面的一个数据仓库，负责保存后台传过来的Json数据，具体用法如下：

var store12=new Ext.data.JsonStore({

　　//results 表示记录数

//rows 表示从后台传过来的JSON数据

//此处仅为传入的模拟Json数据，实际项目中为后台传过来的Json串。
　　data:{ “results”: 2, “rows”:[
　　 {“id”:1, “city”: “suzhou”, “areacode”: “0512”, “perincome”: “2500” },
　　{“id”:2, “city”: “nanjing”, “areacode”: “025”, “perincome”: “2200” }]},

 　   //自动加载(不能用store.load())
　　autoLoad:true,

totalProperty:“results”,

　　root:"rows",

　　fields:[　

{name:‘city’,mapping:‘city’},

{name:‘areacode’,type:‘int’},

{name:‘perincome’,mapping:‘perincome’,type:‘int’},

　　{name:'id',mapping:'id',type:'int'}

]或 field属性精简写法如下

field:[

“city”,“areacode”,“perincome”,“id”

]

});

---

ExtJs中的时间控件的使用：
ext时间控件
（1）：Ext.ux.form.DateTimeField
页面效果 可以精确到年月日时分秒

例：
var _txtEndTime = new Ext.ux.form.DateTimeField({

  name: 'endTime',   名称

  selectOnFocus: true,
  
  allowBlank: false,   不能为空

  value:new Date().add(Date.HOUR,+6),  设置默认值为当前时间6小时后 

  format: 'Y-m-d H:i',   时间格式
 
  fieldLabel: '结束时间',  时间框前对应的名称

  hiddenValue: false,
});

---

_txtEndTime.setValue(new Date().add(Date.DAY,+7)); 长期密码 有限期为7天

_txtEndTime.setValue(new Date().add(Date.HOUR,+6)); 一次性密码 限6小时内使用

---

（2）：Ext.form.DateField
页面效果： 只能精确到年月日 不能选择时分秒 会自动默认为00:00:00

例：
var _txtHappenTime = {

xtype: ‘datefield’,

name: ‘happenTime’,

selectOnFocus: true,

value: new Date(),

format: ‘Y-m-d H:i:s’,

fieldLabel: ‘出现时间’,

hiddenValue: false,
};

---

bbar : new Ext.PagingToolbar({ //分页工具栏的使用
pageSize : 10,
store : store,
displayInfo : true,
displayMsg : ‘显示第{0}条到{1}条,记录共{2}条’,
emptyMsg : ‘没有记录’

分页工具栏常在创建或定义 new Ext.grid.GridPanel( 时的括号最后 加入使用。

---

Extjs 中的使用技巧

 1：关于 Ext.apply()  与  ExtJs.applyif（）的使用与区别

apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中，相当于属性拷贝。
不同的是apply将会覆盖目标对象中的属性，而applyIf只拷贝目标对象中没有而源对象中有的属性。

apply 方法的签名为“apply( Object obj, Object config, Object defaults ) : Object”，
该方法包含三个参数，第一个参数是要拷贝的目标对象，第二个参数是拷贝的源对象，
第三个参数是可选的，表示给目标对象提供一个默认值。
可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象。

1： apply方法的使用详情介绍，1：二者的相同之处： 两个方法的使用都是讲原有 的适应靠背另独享的使用策列
该方法有灿哥参数的存在，第一个为Object类型的使用，第二参数为ObJE2,参与制德育账号先进性星星的联合与对比
，第三个参数为 放大的吗，哦认知，设置，参数可有可无，但是会影响房的返回结果第二个方法的应用藏情是不同于第一个方法的使用的。

---

ExtJS中的 （1）：动态表格，（2）：回车事件，（3）：右键点击事件
学习网址：
https://blog.csdn.net/javahighness/article/details/47447841

---

ExtJs中 修改最后一个信息后，鼠标定位在 修改位置、
（表格某一行数据编辑完后，获取修改后的数据）

var data = grid.getStore().getAt(i).data; // 获取第(i+1)行的数据
var str = Ext.encode(data); // 将对象解析为字符串

---

页面布局 ： ExtJs中的简单的页面布局 实例 ： （tabPanel 选项板）
学习网址： https://blog.csdn.net/aa15237104245/article/details/83148242?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1
Layout制定页面的布局方式

Fit：
在Fit布局中，子元素将自动填满整个父容器。
注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，
则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

border：
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，
我们需要在在其items中指定使用region参数为其子元素指定具体位置。

north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。
north south west east区域变大，center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。

参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。
尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。

---

5 布局
所谓布局就是指容器组件中子元素的分布、排列组合方式。
Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，
布局负责管理容器组件中子元素的排列、组合及渲染方式等

Ext中的一些容器组件都已经指定所使用的布局，
比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，
我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。

Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
Form布局，容器中的元素包括标题及组件内容两项值。

Fit布局，子元素填充整个容器区域。

Accordion布局，折叠布局

---------------------- js 中的timeout()方法或 属性的使用 （ 延时加载 ）
1：等候三秒才执行的 alert( )
2：状态列中自动消失的文字（指定时间后）
3：　自动每秒加 1 的 function （指定间隔时间，间歇性（定时）频发交互）
4：计时的 counter （时间内 计数）
5：只可开启一次的 function （特定时间内 仅限执行一次）

------------------------------------------ JS中 Switch，case 的使用

failure : function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID :
frame.util.ShowAutoPopoMsg(“数据填写非法,不可上传”);
break;
case Ext.form.Action.CONNECT_FAILURE :
frame.util.ShowAutoPopoMsg(“文件上传失败,请检测网络连通性…”);
break;