I'm trying to find an example of how to setup some simple radio buttons in Sencha Touch. Can anyone point me at a good example?
you can try ..
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
{
xtype:'radiofield,
name: 'radiogroup',
value: 'A',
label: 'radio1'
},{
xtype:'radiofield,
name: 'radiogroup',
value: 'B',
label: 'radio2'
}
]
});
The kitchensink demo has a Radio example on the User Experience -> Form example. It's the "Favorite color" of the form. Also, Radio extends Checkbox, so if you can find examples of Checkbox it's similar.
Radio documentation here
The main thing is to give each Radio in a group the same name like the following :
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
new Ext.form.Radio({
name: 'radiogroup',
value: 'A',
label: 'radio1'
}), new Ext.form.Radio({
name: 'radiogroup',
value: 'B',
label: 'radio2'
})
]
});
Related
I'm creating a Docusaurus v2 project that will host documentation for a number of tools. They're all related, so it makes sense for them to be hosted in one place - but they're distinct enough that the docs for each should be separate.
As there are potentially a lot of these tools, I wanted to put the nav links in a dropdown, rather than having them fill up the entire width of the header. I'm trying the following:
themeConfig: {
navbar: {
...
items: [
{
to: '/about',
position: 'left',
label: 'About',
},
{
position: 'left',
label: 'Tools',
items: [
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
},
{
type: 'doc',
docId: 'intro',
label: 'Tool 2',
docsPluginId: 'tool2',
},
...
]
},
...
],
},
}
This partly works, in that a drop down menu appears with the correct labels (Tool 1 and Tool 2) - but the links aren't clickable and aren't highlighted if the active page is one of the documentation tools.
Is this a bug, or am I doing something wrong?
You need href for navigating outside of the website
Or, you need to for avigating within the website, which is client side routing.
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
href: "https://tool1.com"
},
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
to: "/tool1"
},
I am facing some problem in changing the picker view in sencha touch.
I want to call the picker in the right hand side of my view rather than coming from the bottom in a streched manner without making any changes to the sencha touch 2.1.0 libraries.
Thanks in advance.
You can set that using Enter or Exit config (or) setEnter() method on your Picker. Something like this:
xtype: 'picker',
enter: 'left',
exit: 'right',
slots: [
{
xtype: 'pickerslot',
name: 'MyPickerSlot',
title: 'MyPickerSlot',
data: [
{
text: 'One',
value: 1
},
{
text: 'Two',
value: 2
},
{
text: 'Three',
value: 3
}
]
}
]
This is my sencha touch 2 code:
Ext.define("10.view.Main", {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
config: {
title: 'Main',
scrollable: 'both',
editable: false,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'radiofield',
name: 'color',
value: 'red',
label: 'Red',
checked: true
},
{
xtype: 'radiofield',
name: 'color',
value: 'blue',
label: 'Blue'
}]
}]
}
});
Here is the preview of the code. What I get is this:
I want to group my radio fields like given below.
How can I do it?
At the following link you can find an example. Hope it works for you.
http://sureshdotariya.blogspot.be/2013/05/how-to-group-radio-buttons-in-form.html
Greets
I'm trying to create a tabpanel view that contains a splitview controller on the first tab. Think "kitchen sink" demo placed into one tab of a tabpanel.
The others do not contain the nestedlist.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
I've tried placing the nestedlist into a container, which you can see in some of the commented code shown below.
At the moment, this working code only shows the nestlist taking up the entire section on the first tab:
Ext.application({
name: 'Test',
requires: [
'Ext.dataview.NestedList',
'Ext.navigation.Bar'
],
launch: function() {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
id: 'tab4',
title: 'Tab4',
iconCls: 'star',
xtype: 'container',
items: [{
xtype: 'nestedlist',
displayField: 'text',
docked: 'left',
store: store
}, {
html: 'Detail View'
}]
}, {
id: 'tab2',
title: 'Tab2',
iconCls: 'star',
html: 'No nav bar?'
}, {
id: 'tab3',
title: 'Tab3',
iconCls: 'star',
html: 'Screen3'
}]
}).setActiveItem(0);
}
});
Store setup:
Ext.Loader.setConfig({ enabled: true });
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}
]};
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});
Okay. I have created this example for you: http://www.senchafiddle.com/#ynn40
You can also download the whole source from here: http://rwd.me/FG5s (quite large as it includes the SDK)
Be sure to look through all the files as I have added lots of documentation.
Some notes:
I created a new component called Sencha.view.SplitView. This obviously can be called anything. It has a xtype of splitview so we can simply just require it and include it into our Main.js file (which is a Ext.tab.Panel.
{
xtype: 'splitview',
title: 'SplitView',
store: 'Items'
}
Because this is an item inside a tabPanel, we need to give it the title configuration too. Of course we could include this Splitview component anywhere.
As you can see it has a store configuration which is defined in SplitView:
config: {
/**
* We create a custom config called store here so we can pass the store from this component
* (SplitView) down into the nested list when it updates. Checkout {#link #updateStore}
* #type {Ext.data.Store}
*/
store: null
}
This is used to pass the store from the splitview to the nested list (we will get to that in a second). Of course that configuration will do nothing unless we add the appropriate methods to update the nested list:
/**
* This is called when the {#link #store} config has been updated.
* We simply check if the nested list has been created, and if it has, set the store
* on it with the new value.
*/
updateStore: function(newStore) {
if (this.nestedList) {
this.nestedList.setStore(newStore);
}
}
As you can see, we are simply updating the nestedList (if it exists) store with the new value of the SplitView store.
Inside the initialize method of SplitView, we created both the detailContainer (where the detail card of the nested list should go) and the nestedList and then add them to the SplitView. Make sure you look at some of the configurations that we give nestedList as they are important. The store configuration:
// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()
The detailCard and detailContainer configurations:
// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer
And of course the listeners so we know when things get changed:
// And finally add a listener so we know when to update the detail card
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
Finally we add the onLeadItemTap method into the Splitview (we added the listener above) which should update the detail card with new information:
/**
* This is called when a leaf item is tapped in the nested list, or when the detail card
* should be updated. In here, we just get the record which was tapped and then set the HTML
* of the detail card.
*/
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.setHtml(record.get('text'));
}
Hopefully this makes sense and helps you. If not, let me know.
I was working through some sencha touch tutorials and i can't figure out how to add a button to the left of tabs in TabPanel view. By default a button is added to the right of tabs. I have tried changing align and layout settings but nothing seems to be working. Here is the simple code that I'm trying to modify
Ext.setup({
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
tabBar:{
items:[{
xtype: 'button',
ui: 'round',
text: 'Round'
}]
},
items: [{
title: 'Tab 1',
html: '1',
}, {
title: 'Tab 2',
html: '2',
}, {
title: 'Tab 3',
html: '3',
}]
});
}
});
Try this:
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Round',
dock: 'left'
}]
},