修改后的代码:
/*
*list多选扩展
*/
Ext.define(
'ux.SimpleList'
, {
alternateClassName:
'simpleList'
,
extend:
'Ext.List'
,
xtype:
'simpleList'
,
config: {
editCls:
'simpleList'
,
//不加在长按时可能没反应
onItemDisclosure:
false
,
//是否在多选状态(不可更改)
isSimple:
false
,
//设置数据主键(可配置)
ckId:
'id'
,
//默认选择类型,用以应对多种选择情况
defSimpleType: 0,
//多选时弹出菜单栏(可配置)
simpleToolBar: {
//默认位置
docked:
'bottom'
,
//默认标题,用以应对多种选择情况
defTitle:
'删除'
,
items: [{
xtype:
'button'
,
text:
'全选'
,
align:
'left'
,
//标志是全选还是取消全选
isSimple:
true
,
listeners: {
tap:
function
(button) {
var
list = button.up(
'list'
);
if
(
this
.isSimple) {
this
.setText(
'取消全选'
);
list.selectAll();
}
else
{
this
.setText(
'全选'
);
list.deselectAll();
}
this
.isSimple = !
this
.isSimple;
}
}
},
{
cls:
'moreButton'
,
xtype:
'button'
,
text:
'取消'
,
align:
'right'
,
listeners: {
tap:
function
(button) {
var
list = button.up(
'list'
);
//结束多选
list.endSimple(list);
}
}
},
{
cls:
'moreButton'
,
xtype:
'button'
,
text:
'确定'
,
align:
'right'
,
listeners: {
tap:
function
(button) {
var
list = button.up(
'list'
);
var
items = list.getSelection();
//获取选中项
var
ids = [];
for
(
var
i = 0,
item; item = items[i]; i++) {
ids.push(item.data[list.config.ckId]);
}
if
(ids.length>0) {
//触发选择成功事件list:list本身,items:被选中的行,ids:被选中key集合,list.config.simpleType:自定义配置状态
list.fireEvent(
'simpleSuccess'
, list, items, ids, list.config.simpleType);
//结束多选
list.endSimple(list);
}
}
}
}]
},
listeners: {
//监控是否在多选状态
itemtap:
function
(list, index, target, record, e) {
//如果在多选状态停止后续事件的执行
if
(
this
.config.isSimple) {
e.stopEvent();
}
},
//只要按键长按住就会触发,和按键是否离开没有关系
itemtaphold:
function
(list, index, target, record, e) {
//开始多选
this
.beginSimple();
}
}
},
//获取多选边栏
getSimpleToolBar:
function
() {
var
simpleToolBar = Ext.create(
'Ext.TitleBar'
,
this
.config.simpleToolBar);
return
simpleToolBar;
},
//进入多选状态
beginSimple:
function
(simpleType, title) {
if
(!
this
.config.isSimple) {
//取消全选
this
.deselectAll();
//进入多选模式
this
.setMode(
'SIMPLE'
);
//添加css
this
.addCls(
this
.config.editCls);
//显示OnItemDisclosure
this
.setOnItemDisclosure(
true
);
//加入标记,以便在itemtap事件中进行判定
this
.config.isSimple =
true
;
//应对多种选择需求
if
(simpleType) {
this
.config.simpleType = simpleType;
}
else
{
this
.config.simpleType =
this
.config.defSimpleType;
}
//改变标题
if
(title) {
this
.config.simpleToolBar.title = title;
}
else
{
this
.config.simpleToolBar.title =
this
.config.simpleToolBar.defTitle;
}
//添加多选边栏
this
.add(
this
.getSimpleToolBar());
}
},
//结束多选模式
endSimple:
function
() {
var
titlebar =
this
.down(
'titlebar'
);
if
(titlebar) {
//移除多选边栏
titlebar.hide();
titlebar.destroy();
//取消全选
this
.deselectAll();
//进入单选模式
this
.setMode(
'SINGLE'
);
//移除css
this
.removeCls(
this
.config.editCls);
//隐藏OnItemDisclosure
this
.setOnItemDisclosure(
false
);
//加入标记,以便在itemtap事件中进行判定
this
.config.isSimple =
false
;
}
},
//更新OnItemDisclosure需要
updateOnItemDisclosure:
function
(newConfig, oldConfig) {
if
(oldConfig ==
null
) {
return
;
}
var
items =
this
.listItems;
for
(
var
i = 0,
ln = items.length; i < ln; i++) {
var
dItem = items[i].getDisclosure();
newConfig ===
false
? dItem.hide() : dItem.show();
}
}
});
需要加入的css:
.simpleList .x-list-disclosure {
-webkit-mask-
size
:
100%
;
-webkit-mask-image:
url
(data:image/png;base
64
,iVBORw
0
KGgoAAAANSUhEUgAAADwAAAA
8
CAYAAAA
6
/NlyAAAE+klEQVRoBe
2
aS
28
URxRGsY
0
h
2
FmwCQuEWLHjvUNgZAQ
4
PMwrEkIRIGEgySKwB
8
QvYIvEP+ANO
0
CwsJAA
88
wGBEKBZJUVQkJCQrwJ
5
nxN
31
Z
5
pnpc
7
e
4
ZT
9
vT
0
peqqanquqfurVvlIW
3
Dw
8
NTJtPTPplgxdoCnugeb
3
m
45
eEJtgJTJwJPGw
8
cP
8
V
6
TfmC
4
/Z/H
9
uEAAZsIdqHZiMBn
2
UNbvigSw
8
M
2
AIAD
6
PtqBPpmYe+
8
t
1
NoL
9
GLfYf
3
bTKKhiWo
9
PoA
9
KV
0
dUgn/tRh
8
tXWg/Hnj
0
KUB
8
yz
1
JNnjXUuhFd
264
A/f
0
O
7
dKXpQ
7
EIiTPfkKuVyvrSlx
3
US+KPF
26
cMbwxeg
8
Gg
3
W
4
LWHFd
6
rUUepQprQnI/Rh
9
A
25
AtjmqseHVkK
7
w
59
UxpgYFdg
7
wH
0
CwqFpWvyrKI
23
GZ
7
OWluwgqwOnqOobVoWh
4
Tm
97
DwCpBHUFp
2
TiUX
3
v
5
QVMnLQzMmqAsUVWWyta
3
UX/TAmOcwjjk
6
KmE
830
W
7
GbU
0
ZTAGKYEJdj
3
yAcQ
2
qYw
1
jmsG
9
e
0
KF
8122
UDw/SHwFX
0
EYWC+fpZGG/hPcn
1
sqk
8
jGHas+dQ
6
KXCB
6
o
2
g
91
IPfKsObZpgDGsqAT
1
hXdpz
25
A
7
QZqZU
1
gBsxFSh
5
zbEA
9
yniOU
5
R
5
PSvvCnYTSsLYtdkLTGf
9
uKdD/gS
6
gI
6
jPndgUXXe
24
OKSFAK
4
zsoSVA+G
6
uAGaC
758
/oBrIs+Zb
6
rbg
9
up
35
Xpa
1
jffpUqEEldezysbJ
0
VPLjhHADOpEfUiw
2
gtuUtAKDiGtYNXeqDWJ
7
zveYQnqM
3
V
3
nqx
1
s
2
s
97
xmRoLzzWqMgkLLaTVQJa
0
ZoJe+hXjRmaMYKVlslr
2
dlp
5
wgu
4
PsiTyszmg
5
qgVr
0
CqvoZW
2
WFlKxhV
5
gxJsdIMKtYH+Eew
6
yksoNLy
0
soJeFzqR+vEI
9
gx
6
h
9
wFzFoPSlA+
25
g
3
SlChnnUNU
3
grkWmxRg
0
n+ihBnUR
5
w
9
j
2
bCbPGjzzR
3
sgbc+
6
gL
66
TV
4
zkTHHEqSfZSzr+
94
V
0
mbzKUF
1
GkSWknG
5
QktGyoj
7
qBdVeZo
2
S
1
Ch
2
yUNXOMVUcEJyrcQjOeP
4
vzQCu
9
BpBtOck
5
T
70
HybN
4
w
1
iJcR
7
ouem
9
QPjhfG+On
7
EBPUNrKhrYLWp
7
+FS
1
FCjtdKvJ
6
VvM/Q
9
o
2
uWC
1
AHq
60
QB
6
hELh
0
voJ+im
6
iHReF+FZwe
5
HP/g
8
lrXNzuEfeeFu
9
C
9
Kg
8
nSrr
9
lBZ
9
ljK/v
37
xjL
5
qRFSytf
3
K
15
KXy
9
EH
0
D/JN
3
ui
2
Qj
1
rC
5
AAq
4
FnJvoDPUSNBnTnUy
4
YQF
1
maFHlCOAYuouJFN
6
PkWtEo+ryrH
5
sL
2
TPVi
5
UFXAMrfDegxrtae
3
ZfWh
6
paFFffYCx
9
BKZLtQo/a
0
YLXIhSUo
3
yKlAsfQ
8
vSBBkALtrCjxwdqbTWBY
2
glst
9
REee
0
Lw/ULUEZpFuOChxD
1
yuRybNbUV
0
SlAtq
9
SDgGFp
7
ushEJlhdKuqWoAzSLYOBHeidGPkc+cIztE
2
wA
6
iuCcoFtXom
4
Bha
4
f
0
nGmv
2
FqyOnoaFscFG
9
rsfQusYq
0
T
2
G
8
qayASrbdEdOlfR/TJ
72
AzAaHla
5
/QD
9
BnVCucvfK/fjZXtx
8
WzZneu/+WBf
53
XOb
0
G
6
XetHjQXyfv
2
vKLyH
7
qLLqMhJn
5
DOW
5
PLmBZDfRUilloGUoD/ovvXgIrT
4
/rkxt
4
XK
0
fw+TtYxhT
6
iEt
4
FK
7
L
8
D
4
locDFqnUXSadh
78
Bx
5
bEl
2
CLG+
8
AAAAASUVORK
5
CYII=);
background-color
:
#ddd
;
background-image
:
none
;
}
.simpleList .x-item-selected .x-list-disclosure {
background-color
:
#006bb6
;
}
使用示例js
Ext.define(
'app.view.new.List'
, {
alternateClassName:
'newList'
,
extend:
'ux.SimpleList'
,
requires: [
'app.view.new.Info'
],
xtype:
'newList'
,
config: {
store:
'newList'
,
cls:
'list'
,
//自定义css
itemTpl:
new
Ext.XTemplate(
'<div class="left w20"><div class="img" style="background: url({litpic}) no-repeat center;background-size: 100%;"></div></div>'
,
'<div class="right w80"><div class="row">{title}</div><div class="row grayF">{time}</div></div>'
)
}
});
控制器js
/*
*新闻类
*/
Ext.define(
'app.controller.New'
, {
extend:
'Ext.app.Controller'
,
config: {
models: [
'New'
],
stores: [
'NewList'
],
views: [
'new.List'
],
refs: {
newList:
'newList'
},
control: {
//新闻列表
newList: {
initialize:
function
(list) {
MyUtil.showListByParams(
'newList'
, MyUtil.newParams, MyUtil.isNewLoad);
},
//itemtap事件被用来处理检测是否在编辑状态,所以这里使用itemsingletap而不能使用itemtap
itemsingletap:
function
(list, index, target, record, e) {
this
.redirectTo(
'newInfo'
);
MyUtil.showInfo(record,
'newInfo'
,
'NewInfo.ashx'
,
'body'
, {
id: record.data.id
});
},
//结束多选事件触发
simpleSuccess:
function
(list, items, ids, type) {
console.log(ids);
}
}
}
}
});
效果:
长按
确定后触发simpleSuccess事件,输出ids