Say I had the following code:
framework7.actions([
// First buttons group
[
// Group Label
{
text: 'Here comes some optional description or warning for actions below',
label: true
},
// First button
{
text: 'Alert',
onClick: function () {
framework7.alert('He Hoou!');
}
},
// Another red button
{
text: 'Nice Red Button ',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
},
],
// Second group
[
{
text: 'Cancel',
bold: true
}
]
]);
In the above instance, how would I only add the option/code for "First button" if a certain condition was true. eg (if (need_first_button) {} ). If the condition is false then we don't pass that button to the plugin.
And the same goes for "Another red button". How could I only include that option when ( if (need_red_button) {} ) was true?
Hope that makes sense.
Thanks.
Create the argument first, then modify it as needed, finally pass it to the framework function:
var params = [
// First buttons group
[
// Group Label
{
text: 'Here comes some optional description or warning for actions below',
label: true
}
],
// Second group
[
{
text: 'Cancel',
bold: true
}
]
];
if(needFirstButton){
params[0].push({
text: 'Alert',
onClick: function () {
framework7.alert('He Hoou!');
}
});
}
if(needRedButton){
params[0].push({
text: 'Nice Red Button ',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
});
}
framework7.actions(params);
You can easily add new groups, just by pushing an array to params instead of params[x]
params.push([
{
text: 'New group button 1',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
}
]);
The above adds a new group containing one button, but you could add more buttons to it by comma separating the objects.
Related
In future I have many if condition, any idea to shorten the if condition for (Render Badge items)?
Today I just only have 4 item if in the future I have 20 or maybe 100 item, is it i need to code the if for 20 or 100 times?
I have tried many method, but I don't know how to make it.
Render Dynamic List
const medals = productItem.goldmedal || productItem.newitem || productItem.freedelivery;
if (medals) {
const iconBadge = $("<ul>", { class: 'icons' });
function createMedal(src, text) {
const badge =
$("<li>", { class: 'icon' })
.append($('<a>', { class: 'tpsTooltip skeleton_hide', href: '###', 'data-tippy-content': text })
.append($('<img>', { src: src, alt: text })))
.append($('<div>', { class: 'pl-placeholder_skeleton pl-placeholder_liIcon' }));
iconBadge.append(badge);
}
createFeatureIcon.append(iconBadge);
//Render Badge items (Below is the if condition code)
if (productItem.goldmedal) {
createMedal(plSettings.goldMetalSrc, plSettings.goldMetalText)
}
if (productItem.newitem) {
createMedal(plSettings.newItemSrc, plSettings.newItemText)
}
if (productItem.newshop) {
createMedal(plSettings.newShopSrc, plSettings.newShopText)
}
if (productItem.freedelivery) {
createMedal(plSettings.freeDeliverySrc, plSettings.freeDeliveryText)
}
}
Settings
//Settings
var plSettings = $.extend({
mainClass: 'item-wrapper',
itemWrapperClass: 'item ripple-effect ripple-joya itemShadowLight',
goldMetalSrc: '/img/tps/gold.png',
goldMetalText: 'Gold Medal sellers stand out from millions of sellers, bringing more trust and peace of mind to your shopping experience',
newItemSrc: '/img/tps/new.png',
newItemText: 'New item',
sellermedalSrc: '/img/tps/seller.png',
sellermedalText: 'Top Seller',
newShopSrc: '/img/tps/newshop.png',
newShopText: 'New Shop In Joyacart',
freeDeliverySrc: '/img/tps/freedelivery.png',
freeDeliveryText: 'Free Delivery'
});
example data is below:
var data = {
productList: [
{
id: "62276197-6059-4c21-9b40-c5b1d277e85d",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000001_12032019.png",
text: 'Product 001',
goldmedal: false,
newitem: true,
newshop: true,
freedelivery: true
},
{
id: "59de8216-052d-4e51-9f7d-7e96642ded62",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000002_12032019.png",
text: 'Product 002',
goldmedal: true,
newitem: false,
newshop: true,
freedelivery: true
}]
}
So you have a product item that looks like this(I assume you can't change that):
{
id: "62276197-6059-4c21-9b40-c5b1d277e85d",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000001_12032019.png",
text: 'Product 001',
goldmedal: false,
newitem: true,
newshop: true,
freedelivery: true
},
Let's create an array of keys from that object that tell you if you should show a medal for it:
const medalItems = ['goldmedal', 'newitem', 'newshop', 'freedelivery'];
Now instead of multiple if statements you can iterate over these keys and call createMedal for all these that are true in productItem. Passing that medal key(eg. "goldmedal" or "freedelivery") to createMedal function
for (const medal of medalItems) {
if(productItem[medal]) {
createMedal(medal);
}
}
Now in createMedal you can get src and text based on that medal key, but you'll need to adjust settings accordingly (eg. src for goldmedal should be under plSettings.goldmedalSrc)
function createMedal(medal) {
const src = plSettings[medal + "Src"];
const text = plSettings[medal + "Text"];
...
}
Not perfect because you'll need to keep plSettings in sync with productItems but it should work with your current data structures. And all you need to do to get new one to work is to add it to settings and medalItems array
i am trying to hide an item in Ext.menu.Menu base on condition but, i cannot find the trigger load event of menu. Can you give me advice.
//var lala //= 1 2 or 3
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: [
{
text: 'I like Ext',
checked: true, // condition 1
checkHandler: onItemCheck
}, {
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- condition 2
},{
text: 'Choose a Color',
menu: colorMenu // <-- condition 3
}
]
});
Example: only show checkbox in menu if lala = 1.
Thank you.
You can use the afterRender listener on menu items:
{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- condition 2
listeners: {
afterRender: function() {
if (lala == 2)
this.hide();
}
}
}
You can do like this
//var lala //= 1 2 or 3
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: [
{
text: 'I like Ext',
checked: true, // condition 1
hidden : lala == 1 ? true:false,
checkHandler: onItemCheck
}, {
text: 'Choose a Date',
iconCls: 'calendar',
hidden : lala == 2 ? true:false,
menu: dateMenu // <-- condition 2
},{
text: 'Choose a Color',
hidden : lala == 3 ? true:false,
menu: colorMenu // <-- condition 3
}
]
});
From your code //var lala //= 1 2 or 3, I presume, you know the value of lala when creating the menu. All you need to do then is set the items of the menu, that you want.
Something along the lines of:
var menuItems = [];
if (lala === 1) {
menuItems.push({
text: 'I like Ext',
checked: true, // condition 1
checkHandler: onItemCheck
});
}
else if (lala === 2) {
menuItems.push({
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- condition 2
});
}
else if (lala === 3) {
menuItems.push({
text: 'Choose a Color',
menu: colorMenu // <-- condition 3
})
}
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: menuItems
});
You keep talking about 'load'. Your example menu does not have any store, so it does not actually load.
However, if you need to change the menu on the fly, when some store loads (or some other event is fired), you can do it like this:
// Set all menu items in menu
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: [
{
text: 'I like Ext',
itemId: 'lala1', // Item ID to find the component on the fly
hidden: lala !== 1, // if lala is already initialized
//hidden: true, // if lala is not initialized
checked: true, // condition 1
checkHandler: onItemCheck
},
{
text: 'Choose a Date',
itemId: 'lala2', // Item ID to find the component on the fly
hidden: lala !== 2, // If lala is already initialized
//hidden: true, // if lala is not initialized
iconCls: 'calendar',
menu: dateMenu // <-- condition 2
},
{
text: 'Choose a Color',
itemId: 'lala3', // Item ID to find the component on the fly
hidden: lala !== 3, // If lala is already initialized
//hidden: true, // if lala is not initialized
menu: colorMenu // <-- condition 3
}
]
});
// Your store load (or any other event of your choosing)
yourStore.on({
load: function() {
var newLala = getLalaSomehow(); // Get lala the way you do
// Get menu items by the item IDs set previously
var menuItemLala1 = menu.down('#lala1');
var menuItemLala2 = menu.down('#lala2');
var menuItemLala3 = menu.down('#lala3');
// Show/hide menu items based on a condition
menuItemLala1.setVisible(newLala === 1); // Only show when lala is 1
menuItemLala2.setVisible(newLala === 2); // Only show when lala is 2
menuItemLala3.setVisible(newLala === 3); // Only show when lala is 3
}
});
In the example above, I am using setVisible method, which shows the component when the passed argument is true and hides it, if it's false.
I already found the correct way is that trigger before Ext Menu build. Or else the afterrender on run once.
So i have a button which sets the value of a textBox. My problem is that i want this text to be added , not to be set, so i can keep pressing the button while the already written text is not erased.
contents: [
{
id: 'something',
elements: [
{
id: 'something2',
type: 'textarea', }
{ id: 'testbutton',
type: 'button',
button: 'button',
label: 'Button1',
onClick: function() {
this._.dialog.setValueOf("something","something2","Text was set ");
}
},]
onClick: function() {
var curVal = this._.dialog.getValueOf( "something","something2" )
this._.dialog.setValueOf("something","something2", curVal + "Text was set ");
}
Try this solution, i hope it will help you !
I have a panel which represents a 'group' with a button for creating a 'proposal' for that group.
I am passing the current group name in a handler.
When the button is clicked it calls onAddProposalBtn.
items: [
{
xtype: 'panel',
cls: 'currentproposal-container',
id: 'AddProposalPanel',
items: [
{
xtype: 'button',
margins: '0 0 0 20',
cls: 'addproposal-btn green-btn',
hidden: false,
id: 'AddProposalBtn',
scale: 'small',
text: 'Create Proposal',
handler: function(AddProposalBtn) {
var group = me.group;
AddProposalBtn.group = group;
}
}
]
},
The problem is that when the button is clicked the button class is populated but I can't get the group. The output of the console is the 'button' class which includes a populated 'group'. But the actual groupname displays 'undefined'.
onAddProposalBtn: function(button, e, eOpts) {
var groupname = button.group;
console.log(button);
console.log(groupname);
this.groupname = groupname;
this.showCreateWindow();
},
What is strange is if I close the proposal window then click the proposal button again it fills in the group name.
In that code i want to whenever click on the spinnerfield the value increases of spinnerfield that time dynamically change the value of textfield value.
Ext.setup
({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function()
{
new Ext.Panel
({
fullscreen:'true',
items:[
{
xtype : 'spinnerfield',
name:'sp',
width:'20%',
height:'13%',
minValue: 0,
},
{
xtype:'textfield',
name:'price',
height:'13%',
width:'8%',
html:'<b>350</b>',
}
]
});
}
});
There are 3 events you can listen to: 'spin', 'spindown', 'spinup'.
Reference: http://docs.sencha.com/touch/1-1/#!/api/Ext.form.Spinner-event-spin
First change "new Ext.Panel" to "var myPanel = new Ext.Panel" so you can access your panel to get the textfield and change its contents.
Then implement the eventlistener for your spinnerfield:
{
xtype : 'spinnerfield',
name:'sp',
width:'20%',
height:'13%',
minValue: 0,
listeners: {
spin: function(thisSpinner, numberValue, directionString) {
// Get the text field:
var textField = yourPanel.items.get(1);
// Update the text field:
textField.setValue("your new value");
}
}
},