Is there a way to make my schema accept click events for buttons, or do click events have to be binded manually?
For example, is there a way to do something like
schema: [
{
type: 'button',
name: 'sample-button',
label: 'Here is a button',
click: myClickFunction(),
}
]
or do I have to manually set a FormulateInput element and put this in my template
<FormulateInput
type="button"
name="Here is a button"
#click="myClickFunction()"
/>
Related
we are starting a new vuejs SPA application, the thing is that the client is asking to do something like a tabbed navigation.
i mean, each option of the menu, will open in a new closable tab, i was looking for this in here, but each solution that i find, is with all the tabs open from the start, the idea is to do it dynamic.
i've tried to persuade the client from this option, but i didn't have any luck with that, they are migrating the application from a MDI windows app, and somehow want to keep some functionalities.
is there any way to accomplish this task?
regards
1) Store an object array that will be looped through to create tabs. When a tab is opened, add to the list, when a tab is closed, delete the tab from the list
tabs: [ { text: 'tab 1', 'route': 'routeName' },
{ text: 'tab 1', 'route': 'routeName' },
{ text: 'tab 1', 'route': 'routeName' }]
2) Create a router-view under the rendered tabs that will show the route when a tab is clicked
<b-tab v-for="tab in tabs"
#click="navigate(tab.route)>
{{ tab.text }}
<v-tab>
<div>
<router-view>
</router-view>
</div>
Background
I am using xotahal/react-native-material-ui material design in my React-Native application. I have implemented the ActionButton with multiple buttons in it. I can not find anywhere in the docs that is explains how to use this. I was able to find the component in the git repo and managed getting the buttons to render but I can't get them to fire of onClick().
Example
The buttons appear when the main blue button is clicked.
Question
What is the proper way to pass functions to these buttons, or where in the documentation is this explained?
Code
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
{ icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}
/>
toggleSearch() {
console.log('################## HEY SEARCH WORKS ##########################');
}
Problem with this is that no functions are fired when I click the button.
I would be grateful if someone knows where this is explained in the documentation.
ActionButton actions prop expects an object with the shape of {icon, label, name}. If you want to handle onPress you need to define it as a prop to the component and not to the actions object.
Example
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add' },
{ icon: 'save', label: 'Save'}]}
onPress={(text) => this.onPress(text)}
/>
// ...
onPress(text) {
switch(text) {
case:
// do something on this case
break;
case:
// do another thing on this case
break;
}
}
I have just like website, side menu. which is different menu items, I want to display if click one tab then display related information in the next view. if again click next button display in same view. only change button view is same.
Here more clear of these images.
How to do this in sencha, I am very new in sencha. Thank you advance.
You will want to use a Card layout for the main body. See the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card
For the side navigation, you can use simple components that change the active item of the card layout using listeners on the elements of the components (for example, use singletap event for the element: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap).
items: [{
items: [
{
html: 'Student',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(1);
}
}
}
},
{
html: 'Teacher',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(2);
}
}
}
}
]
},
{
id: 'myCardLayout',
layout: 'card',
items: [
{
//student panel
},
{
//teacher panel
}
]
}]
Note that this is pretty sloppy code (it is not MVC, it uses Ext.getCmp, etc), but it is just intended to give you the concept of what should work for you here.
I'm making an iPhone app, I've got a simple segmented button in sencha touch and when I click a reset button in my settings form I want the segmented button to change the pressed button to default.
I've got something like this:
view:
var typPanel = new Ext.Panel({
layout: {type: 'hbox', pack: 'center'},
items: {
xtype: 'segmentedbutton',
id: 'dumbyt',
items: [
{
text: 'Dum'
},
{
text: 'Byt',
pressed: true
}
]
}
});
in the reset button controller i've got
setdefault: function(options) {
...
realio.views.settingsPanel.getComponent('dumbyt').setPressed(0);
}
I also tried assigning id to each button and call .setPressed('id'); but it didn't work too, any ideas?
Thanks.
Look at the arguments for setPressed:
Link
So I have a TabPanel defined like so:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, faq, about]
});
The home section is defined like so:
home = new Ext.Component({
title: "Home",
scroll: 'vertical',
tpl: [
'<tpl for="."',
' <div messageId="{message_id}">',
' </div>',
'</tpl>'
]
});
Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.
How can I add them so that the content section still acts the same way and doesn't start until underneath these added elements?
It's not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your 'home' card as below.... If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.
home = new Ext.Panel({
title: "Home",
scroll: 'vertical',
items: [
{
html: 'first panel'
},
{
tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
}
]
});
Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.