话不多说,直接上源码
Ext.Viewport.add({
xtype: 'picker',
baseCls:'picker-baseCls',
doneButton: {
baseCls:'picker-btntext',
text: '<div style="color:#00CCCB">完成</div>'
},
cancelButton: {
baseCls:'picker-btntext',//自定义Btn样式
text: '取消'
},
toolbar:{
style:'background-color:#fff;background-image: none;border-bottom-color:#D9D9D9;'
},
defaults: {
flex: 1,
style:'border-color:#fff'
},
slots: [
{
name : 'province',
itemId: 'sub_province',
title: '省',
data:provinceAry
},
{
name : 'city',
itemId: 'sub_city',
title: '市',
data : cityAy
},
{
name : 'area',
title: '区',
itemId: 'sub_area',
data : areaAy
}
],
listeners:{
pick:function(view, value, oldValue, eOpts){
//滚动选择picker触发该方法
},
change:function(btn, value, eOpts){
//监听doneBtn按下
},
show:function(e,eOpts){
//当picker显示触发该方法
}, cancel:function(e,eOpts){
//当picker显示触发该方法
}
}
});
}
this.addressPicker.show();
最后上一张最终效果图,其实挺简单的,希望对大家会有帮助