Picker update: slot area covers toolbar after data update
I tried following codes to update the data of a picker component.
Data/slot is successfully updated, however, the slot area goes up and covers toolbar area. I am not sure what's wrong with current codes:
Code:
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
<script type="text/javascript">
Ext.setup({
onReady : function() {
var picker = Ext.create('Ext.Picker', {
id: 'pickCmp',
doneButton: false,
cancelButton: false,
layout: 'fit',
toolbar: {
ui: 'light',
title: 'My Picker!',
items: [{
xtype: 'button',
text: 'update',
handler: function() {
var p = Ext.getCmp('pickCmp');
var newSlots = [
{
title: 'Speed',
data : [
{text: '10 KB/s', value: 10},
{text: '20 KB/s', value: 20},
{text: '30 KB/s', value: 30},
{text: '40 KB/s', value: 40}
]
}
];
p.updateSlots(newSlots, p.getSlots());
}
}]
},
slots: [
{
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
picker.show();
}
});
</script>
</head>
<body>
</body>
</html>
my ultimate goal is to dynamically update data. but for test, I just add a button "Update" to manually update...
thanks for any replies and views!
