Tom：/* store.add() */

2016-04-28T08:06:48Z

‎store.add()

新页面

==actioncolumn动态显示图标==

<source lang="javascript">
getClass: function (v) {
if (v == 'OUTSOURCE') {
return '';
} else {
return this.disabledCls;
}
},
</source>

==Extjs 3.4向4.2升级笔记==

===down()用法===
<source lang="javascript">
//示例1
c.insertPanel.down('button[ref*=btnInsert]').on('click', me._insert, me);

//示例2
tabs.findById('jobsIpStatusQuery').on('click',me._query,me);
tabs.down('button[itemId=jobsIpStatusQuery]').on('click',me._query,me);
</source>

===spacer===
extjs4.2中，更名为tbspacer。

===Msg新写法===
<source lang="javascript">
//extjs3.4
Ext.Msg.ERROR('错误代码：' + response.status + '\n错误描述：' + response.statusText)

//extjs4.2
Ext.MessageBox.show({
title: '错误',
msg: '错误代码：' + response.status + '\n错误描述：' + response.statusText,
buttons: Ext.MessageBox.OK
});
</source>

===Panel样式配置bodyStyle，用style代替===

<source lang="javascript">
bodyStyle: 'margin: 10px' //extjs3.4
style: 'margin: 10px' //extjs4.2
</source>

===grid store新写法===

<source lang="javascript">
var queryResultStore = Ext.create('Ext.data.Store', {
pageSize : 10,
fields : [ 'id', 'ip', 'reqPerson', 'reqDate', 'appDesc', 'creater', 'ascriptionApp' ],
proxy : {
type: 'ajax',
url : './admin/getApiAuthList.action',
extraParams: {},
reader: {
type: 'json',
root : 'data',
totalProperty : 'totalCount'
}
}
});
</source>

===memory proxy===

<source lang="javascript">
//3.4写法
proxy : new Ext.data.PagingMemoryProxy({
data : Ext.value(me.scriptList,[])
})

//4.2写法
data: Ext.value(me.scriptList,[]),
proxy : {
type: 'memory',
enablePaging: true,
reader: {
type: 'json',
root: "data",
totalProperty : 'totalCount'
}
}
</source>

===sm要改写===
<source lang="javascript">
//extjs 3.4
var sm = new Ext.grid.RowSelectionModel({
handleMouseDown : Ext.emptyFn,
singleSelect : true
});

//ext4.2
var sm = new Ext.selection.RowModel({
handleMouseDown : Ext.emptyFn,
mode : "SINGLE"
});
</source>

===store.add()===

<source lang="javascript">
load : function(store,records){
//3.4的写法
//var rec = new store.recordType({'id':-1,'applicationName':'请选择业务名'});

//4.2的写法，直接用对象就可以了。
var rec = {'id':-1,'applicationName':'请选择业务名'};
store.add([rec]);

//在列表头插入
store.insert(0, [rec]);
}
</source>

===baseParams用extraParams改写===

<source lang="javascript">
//3.4里，在store上编辑属性。
taskTListStore.baseParams['applicationId'] = -1;

//4.2里，参数移到proxy里了。
var proxy = taskTListStore.getProxy();
var params = {
name: 'tom'
};

proxy.extraParams['applicationId'] = -1;
Ext.apply(proxy.extraParams, params);

taskTListStore.load();
</source>

===afterrender事件用boxready代替===

<source lang="javascript">
this.findById('jobCustomListPanel').on('afterrender',this._initJobCustomList,this);
this.findById('jobCustomListPanel').on('boxready',this._initJobCustomList,this);
</source>

===grid rowclick事件用itemclick代替===

<source lang="javascript">
rowclick( Grid this, Number rowIndex, Ext.EventObject e )
itemclick( this, record, item, index, e, eOpts )
</source>

===forceFit失效===

3.4里forceFit是写在viewConfig里的，4.2中把forceFit从viewConfig提出来，单独写在外面。

===grid行加复选框===

<source lang="javascript">
//grid配置项
selType: 'checkboxmodel',

//删除选中的行
var sm = gridPanel.getSelectionModel();
var recs = sm.getSelection();
gridPanel.getStore().remove(recs);
</source>

===grid行拖拽===
<source lang="javascript">
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
},
listeners: {
drop: function () {
var sm = stepGrid.getSelectionModel();
var store = stepGrid.getStore();
var rows = sm.getSelection();

if (sm.hasSelection()) {
var stepIdList = [];
store.each(function (item) {
stepIdList.push(item.data.id);
});

Ext.Ajax.request({
url: './jobs/updateTaskT.action',
params: {
"model": "taskT",
"jobTemplateId": _this.initData.jobTemplateId,
"stepIdList": stepIdList.join(','),
"appID": _this.initData.applicationId,
"creater": _this.initData.creater
},
success: function (response, opts) {
if (_this.toolkit.hasPermission(response)) {
_this._loadStepList();
sm.selectRecords(rows);
} else {
_this._loadStepList();
}
},
failure: function (response, opts) {
printMsg('移动步骤时出现异常！异常代码:' + response.status);
}
});
}
}
}
},
</source>

===container用fieldcontainer代替===

4.2中，container已经没有fieldLabel配置项了，标签配置不会显示，换用fieldcontainer就行了。

===Checkbox===

3.4到4.2用法的不同：

# 赋初值 item.value -> item.inputValue
# 取选中项 myGroup.getValue() -> myGroup.getChecked()
# 取值 item.value -> item.inputValue

===用query()代替findByType()===
<source lang="javascript">
//3.4
grid = tab.findByType('grid');

//4.2
grid = tab.query('grid');
</source>

===infos失效===

<source lang="html5">
<a class="infos" ext:qtip="同步功能说明..."></a> 
<a class="infos" data-qtip="同步功能说明..."></a> 
</source>

===radiogroup初值，用inputValue代替value===

<source lang="javascript">
{
xtype: 'radiogroup',
id: 'exeType',
fieldLabel: '执行模式',
items: [
{boxLabel: '无人模式', name: 'exeType', inputValue: 0},
{boxLabel: '单步模式', name: 'exeType', inputValue: 1},
{boxLabel: '混合模式', name: 'exeType', inputValue: 2}
]
},
</source>

===window不显示边框===

<source lang="javascript">
new Ext.Window({

border: false,
header: false,
style: {
border: 0,
borderStyle: 'none',
padding: 0,
'border-radius': 0
},

closable: false,
modal: true,
maximized: true,
layout: 'fit',
closeAction: 'hide',
listeners: {
beforeadd: function (ct, cmp, index) {
var el = ct.getEl();
el.mask('正在加载步骤信息……');
(function () {
el.unmask();
}).defer(1000);
}
}
});
</source>

==ajax用法==

<source lang="javascript">
Ext.Ajax.request({
url: '/article/save',
params: values,
success: function (res) {
var result = Ext.decode(res.responseText);
console.log(result);
}
});
</source>

==Extjs 3.4向4.2升级：去除告警信息==

==ExtJS 5 beta 发布==

http://dev.sencha.com/ext/5.0.0/

==Extjs树中CheckBox的选中和取消选中==

在Extjs中treepanel中树节点为checkbox类的节时，有时候我们需要用程序来设置他的选中和取消选中状态。

<source lang="javascript">
var nodes=tree.getChecked();
if (nodes && nodes.length) {
for (var i=0;i<nodes.length;i++) {
nodes[i].getUI().toggleCheck(false); //设置UI状态为未选中状态
nodes[i].attributes.checked=false; //设置节点属性为未选中状态
}
}
</source>

这样通过获取已选择的节点，用程序取消选择状态。反之可以设置未选中节点选中状态。

==在ExtJs的容器中显示图片，并动态更新==

Extjs并没有提供直接的组件来显示图片。

网上通过设置textfield的InputType为Image然后再修改dom对象来实现，其实image的属性值并没有包含在Extjs的官方文档当中。

可以通过以下的思路实现，更可以进一步扩展成自定义组件。推荐的方法如下:

<source lang="javascript">
//首先做一个容器
{
xtype: 'box',
width: 100,
height: 200,
autoEl: {
tag: 'img',
src: 'myphoto.gif'
}
}

//动态更新只需要获取到刚才建立的box的dom的src
myphoto.getEl().dom.src = newSrc;
</source>

==学习笔记==

组件分类：基本组件、工具条组件、表单组件

核心组件：
*Ext.Component
*Ext.BoxComponent
*Ext.Container
*Ext.Panel
*Ext.TabPanel

ExtJS - 版本历史

Tom：/* store.add() */