I'm using Sencha Touch in one of my mobile projects. As one of the components of it I'm using the Picker. I know that the picker values are being got from the "data" attribute which is an array containing object like so:
[{"text":"One","value":1},{"text":"Two","value":2},{"text":"Three","value":3}]
However what I need to do is - fill the picker with values from an array which is being generated dynamically from a store. Could anybody help me with this, please?
Thanks.
Use Ext.Picker.Slot which allows you to add a Ext.data.Store to it. The store will enable you to get data from server and the Picker slots will be populated.
This is what given in Sencha docs:
A general picker class. Ext.picker.Slots are used to organize multiple
scrollable slots into a single picker. slots is the only necessary configuration.
The slots configuration with a few key values:
name: The name of the slot (will be the key when using
getValues in this Ext.picker.Picker)
title: The title of this slot (if useTitles is set to true)
data/store: The data or store to use for this slot.
Remember, Ext.picker.Slot class extends from Ext.dataview.DataView.
{
xtype:'picker',
width:'100%',
height:'100%',
id:'chooseLocationRoomListPicker',
baseCls:'pickerCls',
cancelButton: false,
doneButton: false,
toolbar:false,
slots : [{
name:'chooseLocationRoomListPickerList',
store: Ext.getStore('roomStore'),
displayField: 'level',
valueField: 'id',
align:'center',
value:'202'
}]
}
Related
I have a Rally grid that I'm creating using the Rally app builder. Standard grid using the defect model. One of the fields in the defect model is set to hidden in the field setup in the Rally Workspaces and Projects setup. I'd like to dynamically make the field visible in my grid so that it only appears on my grid and not on the defect page when entering a defect. Any ideas on how to do that? Thanks.
This was a pretty tricky one. The grid and board components are hard wired to not show data from hidden fields by default and unfortunately there are not any config properties exposed to turn this behavior off. Here's what I came up with:
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
text: 'Hidden Field', //set column header text
renderer: function(value, meta, record) {
//return the rendered field data
return record.get('c_HiddenField');
}
}
],
context: this.getContext(),
storeConfig: {
model: 'userstory',
fetch: ['c_HiddenField'] //need to explicitly fetch
}
});
Basically you include a column in your columnCfgs without a dataIndex specified. Set the text and renderer to work with your field.
You'll also need to manually fetch your field in the storeConfig since the grid won't understand how to do it otherwise.
Can we use Array Instead of Store for List in "sencha touch".
config:{
store: 'storeName',
scrollable: true,
itemTpl: '<div>{store_id}</div>'
}
This is config part of my store I want to use array for this list instead of store.
Please provide some code.
Thanks.
You can use a List's data config property, which is an array of any fields you want, with some that will match your itemTpl for display. It's basically a direct line into a List's store, which is created in the background for you without needing to be set. You will not need to define the store when setting the data directly.
It's probably best to set the data as an array in a defined store, and then set the store to the list, but you don't have to do it this way, and there are some cases you want to just use a simple array (see example below).
The Sencha Touch documentation shows examples of using the data array without a defined store here.
Sencha Touch 2.1.1 List data example
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
You could also set data to an externally defined array, provided your list is created after the array is. If this turns out to be a timing problem, then you can set the data with an array at any later time using
listname.setData(someArray);
Provided you got a proper reference to listname ahead of time.
I'm using Sencha Architect 2.1
I have an Store and a Container, but how can I render the data from the store using the container?
I created a 1 minute video explaining the problem:
http://www.youtube.com/watch?v=_HpR9h80D94
In other words this is what I want to do in Secha Designer 2:
data: ordersStoreId.getData(),
Compleate:
xtype: 'container',
title: 'MyContainer6',
iconCls: 'info',
data: ordersStoreId.getData(),
tpl: [
'Testing: {status}'
]
Any idea? Thanks! :)
So this looks like a bug. I guess one way to work around this issue is to add the show listener to your container and then you can dynamically pull in data from your store.
listeners: {
show: function(this, opts){
this.setData( Ext.getStore('yourStore').getData() );
}
}
So in Architect:
1) Select your container
2) In your config window add an Event Bindings by clicking the + icon and choose Basic Event Binding
3) Choose the event name show like I suggested. You will then be presented with an editable code view where you can put your code. ex:
this.setData( Ext.getStore('yourStore').getData() );
Hope this helps.
In Sencha Touch 2, I have a formpanel with a selectfield to pick from a large store of models. I can choose between an Ext.Picker or an Ext.List as the picker component by setting the usePicker property on the selectfield. But how do I configure the Ext.List?
I tried setting defaultPhonePickerConfig and defaultTabletPickerConfig, but that doesn't seem to work. Specifically, I want to set { grouped: true, indexBar: true } to help my users navigate the long list of options. I used the JavaScript debugger to trace the showPicker() method and verified that the instantiated Ext.List has those two properties set in its config property. But the list overlay still doesn't show the group headings or the index bar. Any idea what I could be doing wrong?
The solution is to defer configuration until after the panel component is painted:
usePicker: false,
defaultTabletPickerConfig: {
listeners: {
painted: function(panel) {
var list = panel.down('list');
list.setGrouped(true);
list.setIndexBar(true);
}
}
}
This is dumb.
Within Sencha Touch, is it possible to define a default UI , like "light" or "dark", that applies to all components (unless overwritten explicitly)?
The aim is to avoid having to declare ui: "dark", or any custom UI that is made, for every element.
Cheers!
You can try this:
Ext.apply(Ext.Component.prototype, {
getUi: function() {
var defaultUi = 'light';
// value of [this.config.ui] is ignored here
// we can use something like forcedUi
return (this.forcedUi) ? this.forcedUi : defaultUi;
}
})
The disadvantage of this code is that we need to specify another variable for applying ui different from 'light' (because variable 'ui' via getUi() will always return 'light'):
...
items: [{
xtype: 'button',
forcedUi: 'dark'
}]
...
I am stuck on Touch 1.1 so sunsay's solution didn't work for me, but this did:
Ext.CustomToolbar = Ext.extend(Ext.Toolbar,
{
ui:'app'
});
Ext.reg('toolbar', Ext.CustomToolbar);
So, it's still component-by-component-type, but not component-by-component-instance. And since you can overwrite the "reg", no need for custom x-types all over the place, either.
I assume that you know about sencha touch styles and themes. Otherwise you can download a pdf file from this link which clearly describes about how to do it...
http://f.cl.ly/items/d9df79f57b67e6e876c6/SenchaTouchThemes.pdf
In it they are mentioning about scss file where you can specify the base-color, ie
$base-color: #4bb8f0 ;
$base-gradient: 'glossy';
Then run it ... you can see the toolbars and buttons created with the color and gradient you have mentioned.