Leaflet draw edit control custom text - leaflet

I'd like to change the options text from edit control at Leaflet Draw. So instead of Save|Cancel|Clear All Display this text in another language. Same on the tooltips. Is it possible?

I solved in this way.
L.drawLocal = {
draw: {
toolbar: {
// #TODO: this should be reorganized where actions are nested in actions
// ex: actions.undo or actions.cancel
actions: {
title: 'Cancel - your text-',
text: '- your text-'
},
finish: {
title: '- your text-',
text: '- your text-'
},
undo: {
title: '- your text-',
text: '- your text-'
},
buttons: {
polyline: '- your text-',
polygon: '- your text-',
rectangle: '- your text-',
circle: '- your text-',
marker: '- your text-',
circlemarker: '- your text-'
}
},
handlers: {
circle: {
tooltip: {
start: '- your text-'
},
radius: '- your text-'
},
circlemarker: {
tooltip: {
start: '- your text-.'
}
},
marker: {
tooltip: {
start: '- your text-.'
}
},
polygon: {
tooltip: {
start: '- your text-.',
cont: '- your text-.',
end: '- your text-.'
}
},
polyline: {
error: '<strong>Error:</strong> shape edges cannot cross!',
tooltip: {
start: 'Click to start drawing line.',
cont: 'Click to continue drawing line.',
end: 'Click last point to finish line.'
}
},
rectangle: {
tooltip: {
start: '- your text-.'
}
},
simpleshape: {
tooltip: {
end: 'Release mouse to finish drawing.'
}
}
}
},
edit: {
toolbar: {
actions: {
save: {
title: 'Save changes',
text: 'Save'
},
cancel: {
title: 'Cancel editing, discards all changes',
text: 'Cancel'
},
clearAll: {
title: 'Clear all layers',
text: 'Clear All'
}
},
buttons: {
edit: 'Edit layers',
editDisabled: 'No layers to edit',
remove: 'Delete layers',
removeDisabled: 'No layers to delete'
}
},
handlers: {
edit: {
tooltip: {
text: 'Drag handles or markers to edit features.',
subtext: 'Click cancel to undo changes.'
}
},
remove: {
tooltip: {
text: 'Click on a feature to remove.'
}
}
}
}
};

Related

Ionic alert label not display

I'm used Ionic 3 and I'm try to display label for behind the input fields ,but it's not display,why is not showing? please help me to fix it
Thanks
doPrompt() {
let prompt = this.alertCtrl.create({
title: '5 Rooms Available',
message: "",
inputs: [
{
label: "Single Rooms (3)",
name: 'Single Rooms (3)',
placeholder: '$200.00',
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Set',
handler: data => {
console.log('Saved clicked');
}
}
]
});
prompt.present();
}

Is it possible to change tinyMCE custom Toolbar ListBox values after tinymce init

Following example is add a custom dropdown to tinyMCE, is it possible to change again after init tinyMCE? for example, after init the tinyMCE, update the list again by another button by different list.
https://codepen.io/tinymce/pen/JYwJVr
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'mybutton',
menubar: false,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
setup: function (editor) {
editor.addButton('mybutton', {
type: 'listbox',
text: 'My listbox',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: 'Menu item 1', value: ' <strong>Some bold text!</strong>' },
{ text: 'Menu item 2', value: ' <em>Some italic text!</em>' },
{ text: 'Menu item 3', value: ' Some plain text ...' }
],
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});
I didn't find any choice that I can update only for the custom dropdown. This is not what good way but the only way I can make it work. So what I did was remove tinymce and re-add it again.
tinymce.remove();
tinymce.init({
selector: 'textarea',
setup: function (editor) {
var self = this;
editor.addButton('mybutton', {
type: 'listbox',
text: 'myList',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: newList,
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});

Not able to get reference to form in sencha

I am trying reset a form, on click of button.
The button's functionality is defined in file seperate controller file.
But on clicking button reset i get error
"Uncaught TypeError: Object form1orig has no method 'reset' "
Controller
Ext.define('myapp.controller.form1', {
extend: 'Ext.app.Controller',
requires: [
'myapp.view.form1'
],
config: {
refs: {
form1orig: '#pressc',
form1Submit: 'button[action=sub]',
form1Reset: 'button[action=res]'
},
control: {
'form1Reset' : {
tap: 'onForm1Reset'
},
'form1Submit' : {
tap: 'onForm1Submit'
}
}
},
onForm1Reset: function(button){
'form1orig'.reset();
console.log('Tapped reset');
},
onForm1Submit: function(button){
console.log('Tapped submit');
}
});
View
Ext.define('myapp.view.form1', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
],
xtype: 'form1Me',
id: 'form1Me',
config: {
items: [
{
xtype: 'fieldset',
id: 'pressc',
instructions: 'Please enter the information above.',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype:'textfield',
name: 'name',
label: 'Name',
id: 'eman',
placeHolder: 'Name'
},
{
xtype: 'textareafield',
name : 'Prescription',
id: 'pres',
label: 'Prescription',
placeHolder: 'Enter your prescription here...'
}
]
},
{
xtype: 'container',
defaults: {
xtype: 'button',
style: 'margin: .5em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Submit',
id: 'subMe',
action: 'sub',
scope: this,
hasDisabled: false
//handler: function(btn){
/*var presscForm = Ext.getCmp('presscForm');
presscForm.submit({
url: '../../result.php',
method: 'POST',
success: function() {
alert('Thamk you for using our service');
}
});*/
//}
},
{
text: 'Reset',
id: 'resMe',
action: 'res'
/*handler: function(){
Ext.getCmp('form1Me').reset();
}*/
}
]
}
]
}
});
Help
You should do something like:
var form = Ext.ComponentQuery.query('form1Me');
form.reset();

Sencha touch nested list no data

I am new for sencha touch. I using mvc method. Please see my code below
Main.js
Ext.define('test.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.dataview.NestedList'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'nestedlist',
}
]
}
]
}
});
Nestedlist.js
Ext.define('bluebutton.view.NestedList', {
extend: 'Ext.NestedList',
xtype: 'nestedlist',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
],
config: {
store : { xclass : 'Test.store.data'},
detailContainer: detailContainer,
detailCard: true,
},
});
Test.store.data
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});
model.js
Ext.define('Test.model.data', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
But nested list no able to get the data. I get empty list. Any solution?
If you are providing inline data in store shouldn't it be data attribute instead of root?
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
data: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});

Sencha touch How to combine filters

i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.
the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel
following is the code for filters.js
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
ui: 'green',
cls: 'x-toolbar-dark',
baseCls: 'x-toolbar',
initComponent: function() {
this.addEvents('filter');
this.enableBubble('filter');
var form;
var showForm = function(btn, event) {
form = new Ext.form.FormPanel(formBase);
form.showBy(btn);
form.show();
};
Ext.apply(this, {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
layout: {
type: 'hbox',
align: 'center'
},
items: [
{
xtype: 'button',
iconCls:'info',
title:'info',
iconMask:true,
ui:'plain',
},{
xtype: 'spacer'
},/*{
xtype: 'selectfield',
name: 'search',
prependText: 'Search:',
options: [
{text: 'Location', value: 'location'},
{text: 'Theme', value: 'theme'},
]
},*/{
xtype: 'searchfield',
name: 'q',
placeholder: 'Search',
value: 'Destination or ID',
listeners : {
change: this.onFieldChange,
keyup: function(field, e) {
var key = e.browserEvent.keyCode;
// blur field when user presses enter/search which will trigger a change if necessary.
if (key === 13) {
field.blur();
}
},
scope : this
}
},{
xtype: 'selectfield',
name : 'sort_by',
prependText: 'sort_by:',
ui:'button',
cls:'sortbox',
options: [
{text: 'Sort By', value: ''},
{text: 'Newest', value: 'modified'},
{text: 'Sleeps', value: 'sleep_max'},
{text: 'Sleeps Desc', value: 'sleep_max DESC'},
{text: 'Bedrooms', value: 'bedroom'},
{text: 'Bedrooms Desc', value: 'bedroom DESC'},
// {text: 'Rates', value: 'rates'},
]
},{
xtype: 'button',
text: 'Filters',
handler: showForm
}
]
});
kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
//for filters form
var formBase = {
scroll: 'vertical',
//url :
standardSubmit : true,
items: [{
xtype: 'fieldset',
title: 'Filters',
instructions: 'Please enter the information above.',
defaults: {
//required: true,
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'spinnerfield',
name : 'sleep_max',
label: 'Sleeps',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'bedroom',
label: 'Bedrooms',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'rates',
label: 'Rates',
minValue: 50,
maxValue:5000,
incrementValue: 100,
cycle: false
},/*{
xtype: 'datepickerfield',
name : 'checkIn',
label: 'Check In',
destroyPickerOnHide: true,
},{
xtype: 'datepickerfield',
name : 'checkOut',
label: 'Check Out',
destroyPickerOnHide: true,
},*/{
xtype: 'selectfield',
name : 'themes',
label: 'Themes',
options: [
{text: 'Themes', value: ''},
{text: 'Skiing', value: 'skiing'},
{text: 'Golf', value: 'golf'},
{text: 'Beaches', value: 'beaches'},
{text: 'Adventure', value: 'adventure'},
{text: 'Family', value: 'family'},
{text: 'Fishing', value: 'fishing'},
{text: 'Boating', value: 'boating'},
{text: 'Historic', value: 'historic'},
{text: 'Biking', value: 'biking'},
]
},/*{
xtype: 'hiddenfield',
name : 'secret',
value: 'false'
},*/]
}],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
console.log(form);
console.log(result);
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Cancel',
handler: function() {
form.hide();
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Apply',
ui: 'confirm',
handler: function() {
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: false,
hideOnMaskTap: false,
height: 300,
width: 420,
});
}
},
/**
* This is called whenever any of the fields in the form are changed. It simply collects all of the
* values of the fields and fires the custom 'filter' event.
*/
onFieldChange : function(comp, value) {
//console.log(comp); console.log(value);
this.fireEvent('filter', this.getValues(), this);
}
});
Ext.reg('loanFilter', kiva.views.LoanFilter);
Its not clear what do you mean under "filters doesn't work".
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating
Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase
var formBase = {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
...