How to set the badge to SegmentedButton with Secha Touch 2.0.2
var segmentedButton = new Ext.SegmentedButton({
allowMultiple: true,
items: [
{
text: 'Option 1',
},
{
text : 'Option 2',
pressed: true
},
{
text: 'Option 3'
}
],
listeners: {
toggle: function(container, button, pressed){
console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
}
}
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });
like this:
Anyone know how to do that? it's better to do with SegmentedButton
Use badgeText:
Optional badge text.
Working example: https://fiddle.sencha.com/#fiddle/1f5m
Related
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
As the title suggests, Tinymce's dialog box's textbox is overlapping with the label.
ed.addButton('addref', {
title : 'Add References',
image : 'img/example.gif',
onclick : function() {
ed.windowManager.open({
title: 'Add References',
body: [
{type: 'textbox', name: 'refName', label: 'Name'},
{type: 'textbox', name: 'refSurname', label: 'Surname'}
],
onsubmit: function(e) {
ed.focus();
ed.selection.setContent('<pre class="language-' + e.data.refName + ' line-numbers">Data</pre>');
}
});
}
});
This is how my dialog box looks
I was using a beta version of tinymce(4.0b1). When I updated my library to 4.5.2, the issue was solved.
I am new on kendo ui. I need your help, please. I need to use checkbox somewhere. My problem is when I edit any record, checkbox which is on popup menu can show status of attribute but grid doesn't show. I want to show attribute of the record show in checkbox on grid.
I try to this sample :http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column but It doesn't work for my expected.
Here is my code:
{
field: "isWorking",
title: "Çalışıyor",
editor: '<input type="checkbox" #= isWorking ? \'checked="checked"\' : "" # class="chkbx" />'
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
$("personGrid.k-grid-content").on("change","input.chkbx",function(e){
var grid = $("#personGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("isWorking", this.checked);
});
And screenshots of how it works. Please follow the ss.
From here this is solution from linke where is given by me up of issue.
Here code is my first work:
{
field: "isWorking",
title: "Çalışıyor",
template: "<input type='checkbox' id='isWorking'/>"
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
And here how is work ss. It's show status on popup edit menu but it doesn't show on grid.
please could you help me?
You're setting the checkbox in the template but not its value. It will have always the initial state. Try this template:
template: "<input type='checkbox' id='isWorking' # if (isWorking) { # checked=\"checked\" # } # />"
Demo
I've created a custom dropdown in tinymce like this:
tinymce.init({
toolbar: "alignment",
setup: function(editor) {
editor.addButton('alignment', {
type: 'menubutton',
text: 'Alignment',
icon: false,
menu: [
{ text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
{ text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
{ text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
{ text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
]
});
}
});
which creates this:
However what I'd like is to just move the alignment buttons from the main toolbar in the dropdown menu.
How do I got about putting these actual buttons from the toolbar, into a dropdown menu? Is it like the code above or is a a totally different way?
So basically put these buttons in the dropdown above with the toggle states for on and off too.
Try this setup - Plunker
tinymce.init({
selector: "textarea",
toolbar: "styleselect | bold italic | alignment | alignmentv2",
setup: function(editor) {
editor.addButton('alignment', {
type: 'listbox',
text: 'Alignment',
icon: false,
onselect: function(e) {
tinyMCE.execCommand(this.value());
},
values: [
{icon: 'alignleft', value: 'JustifyLeft'},
{icon: 'alignright', value: 'JustifyRight'},
{icon: 'aligncenter', value: 'JustifyCenter'},
{icon: 'alignjustify', value: 'JustifyFull'},
],
onPostRender: function() {
// Select the firts item by default
this.value('JustifyLeft');
}
});
editor.addButton('alignmentv2', {
type: 'menubutton',
text: 'Alignment v2',
icon: false,
menu: [
{icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
{icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
]
});
}
});
#NoBugs, you can enhance the onselect method to perform the alignment icon update.
At first, by examining structure of this object in the onselect method we'll see that this.settings.values property stores an array with early defined values.
By using one of many find utility functions we get the selected value item and update the icon as needed:
onselect: function() {
selectedItem = find(this.settings.values, {value: this.value()})
this.icon(selectedItem.icon)
tinyMCE.execCommand(this.value());
}
Hope, this helps. Cheers!
This is probably best solved using a custom split button. That way we can assign the last selected option to the main button.
See the result here - CodePen
tinymce.init({
selector: '#editor',
menubar: false,
toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',
setup: function (editor) {
editor.on('init', function() {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Georgia';
});
editor.addButton('alignmentsplit', {
type: 'splitbutton',
text: '',
icon: 'alignleft',
onclick: function(e) {
tinyMCE.execCommand(this.value);
},
menu: [{
icon: 'alignleft',
text: 'Align Left',
onclick: function() {
tinyMCE.execCommand('JustifyLeft');
this.parent().parent().icon('alignleft');
this.parent().parent().value = 'JustifyLeft'
}
}, {
icon: 'alignright',
text: 'Align Right',
onclick: function() {
tinyMCE.execCommand('JustifyRight');
this.parent().parent().icon('alignright');
this.parent().parent().value = 'JustifyRight';
}
}, {
icon: 'aligncenter',
text: 'Align Center',
onclick: function() {
tinyMCE.execCommand('JustifyCenter');
this.parent().parent().icon('aligncenter');
this.parent().parent().value = 'JustifyCenter';
}
}, {
icon: 'alignjustify',
text: 'Justify',
onclick: function() {
tinyMCE.execCommand('JustifyFull');
this.parent().parent().icon('alignjustify');
this.parent().parent().value = 'JustifyFull';
}
}
],
onPostRender: function() {
// Select the first item by default
this.value ='JustifyLeft';
}
});
}
});
Note: If you re-select an alignment option on content that is already aligned that way, TinyMCE toggles the alignment formatting off. This is default TinyMCE behaviour, but you would need to indicate that the section already has that formatting via a toggle state on the button for this to make more sense to the user. This has not been implemented above.
I have an Ext.Window that contains a formPanel. The formPanel has a radiogroup item which loads a radioItemsArray. Initially I create each radioItem based on data from myRadioStore and is mapped to the radiogroup in formpanel. This works fine, see code below:
this.radioItemsArr = [];
Ext.each(myRadioStore.data.items, function(itm, i, all) {
var radioItem = new Ext.form.Radio({
id : itm.data.dataId,
// custom radio label with text + images
boxLabel:
'<b>Data id:</b> ' + itm.data.dataId + '<br/>' +
'<b>Data:</b> ' + itm.data.dataDetail + '<br/>' +
'<p>' + '<img id style="imgStyle" src=\"' + itm.data.url + '\"/></p>',
name: 'radioName',
inputValue: itm.data.dataId ,
height: 'auto',
checked: false
});
this.radioItemsArr.push(radioItem);
}, this);
this.myForm = new Ext.form.FormPanel({
border: false,
id:'my-form',
frame : true,
layout : 'fit',
items: [{
autoScroll: true,
id: 'myFormId',
defaults: {
labelStyle: 'font-weight:bold;'
},
items: [{
title: 'Custom Title',
items: [{
// custom description text set on form load
id: 'descId',
style : { marginTop: '15px', border:'5px'}
}]
}, {
title: 'Select an item from below',
items: [{
anchor: '0',
autoHeight: true,
xtype: 'radiogroup',
hideLabels: true,
id: 'allRadiosID',
items: [
this.radioItemsArr
],
}]
}
],
}],
buttonAlign :'center',
buttons: [{
// save button
},{
// cancel button
}]
});
This loads all the radio buttons correctly the first time. But when myRadioStore is updated with new data from server (it happens when user clicks a button), I want my form panel to update with the new radio buttons. So when myRadioStore is updated, I remove all items in radioItemsArray and then creates new radioItem by looping through the store and pushing to radioItemsArr. I can see that the radioItemsArr has new radio button options. But the radiogroup in formpanel is not getting refreshed.
Calling Ext.getCmp('my-form').doLayout() don't seem to work. Any thought/comments?
Edit: I'm using extjs 3.4
Thanks!
Nothing is binding the store to the radio group directly. You could add a listener to the store, with the update listener to then programatically add the new store radios.
Untested code but should be near-enough.
// Add a listener to the store, this can be defined in the `listeners` property of the store config too.
myRadioStore.addListener('update', function () {
// get the radio group and remove all items
var radioGroup = Ext.getCmp('allRadiosID');
radioGroup.removeAll();
// call the function to renew the radio array.
getRadioArray();
radioGroup.add(this.radioItemsArr);
// Optionally update the container form too
Ext.getCmp('my-form').doLayout();
}, this);
this.radioItemsArr = [];
function getRadioArray() {
this.radioItemsArr = [];
Ext.each(myRadioStore.data.items, function (itm, i, all) {
var radioItem = new Ext.form.Radio({
id: itm.data.dataId,
// custom radio label with text + images
boxLabel:
'<b>Data id:</b> ' + itm.data.dataId + '<br/>' +
'<b>Data:</b> ' + itm.data.dataDetail + '<br/>' +
'<p>' + '<img id style="imgStyle" src=\"' + itm.data.url + '\"/></p>',
name: 'radioName',
inputValue: itm.data.dataId,
height: 'auto',
checked: false
});
this.radioItemsArr.push(radioItem);
}, this);
}
getRadioArray();
this.myForm = new Ext.form.FormPanel({
border: false,
id: 'my-form',
frame: true,
layout: 'fit',
items: [{
autoScroll: true,
id: 'myFormId',
defaults: {
labelStyle: 'font-weight:bold;'
},
items: [{
title: 'Custom Title',
items: [{
// custom description text set on form load
id: 'descId',
style: {
marginTop: '15px',
border: '5px'
}
}]
}, {
title: 'Select an item from below',
items: [{
anchor: '0',
autoHeight: true,
xtype: 'radiogroup',
hideLabels: true,
id: 'allRadiosID',
items: [this.radioItemsArr]
}]
}]
}],
buttonAlign: 'center',
buttons: [{
// save button
}, {
// cancel button
}]
});
Calling layout/render on form did not work in case of radioGroup. So every time myRadioStore is updated, you need to remove the radiogroup from the form, create a radio array from myRadioStore and then re-add the radiogroup array back in the form.
Something like:
Ext.getCmp('my-form').remove(Ext.getCmp('allRadiosID'), true);
// recreate `radioItemsArr[]` array of radios from updated `radioItemsArr` and add it back to form
Ext.getCmp('my-form').add(new Ext.form.RadioGroup({
anchor: '0',
autoHeight: true,
id: 'allRadiosID',
items: [
radioItemsArr
]
});