Add help button to Extjs gridpanel header - javascript

I want to add a button to the right hand side of my gridpanel header but can't find anyway of doing so.
I don't want to add a toolbar since it's only 1 button I want to add.

Check out the panel's tools config. Simply add it to grid's config:
Ext.create('Ext.grid.Panel', {
// ...
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
// ...
});
Here is demo.

Related

Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.
After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks

Highchart drillup issue

I am trying to drill up using my own button but having difficulties.
JSfiddle with multi drilldown
$( "#backbtn" ).click(function(e) {
setChartC(name, categories, data, '', 1);
alert(chartC.xAxis[0]);
});
I have levels, how can I access the drilldown.level?
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Go Back',
onclick: function () {
var drilldown = chartC.drilldown;
alert(chartC.level);
}
}
}
Cant seem to access the level as i got drill down. is there any way I can access the level
You can use the native Highcharts back button. You can see an example here (link author here).
However, if you want to add a custom button, I don't believe that Highcharts have an easy way for that. If you find that I'm wrong, please correct me.
So, to add a custom back button, you need to track what is the current chart that you are showing. Knowing what is the current, you could look into a dictionary to find which level it is. To get the current chart, you can track the click events:
plotOptions: {
column: {
point: {
events: {
click: function () {
console.log("I'm at: " + this.drilldown.name)
}
}
}
}
}
Regarding the custom back button, look this JSFiddle.
Add this HTML:
<input type="button" id="backbtn" value="Back">
And this JS:
$("#backbtn").click(function(e) {
setChart(name, categories, data);
});
Since the variables name, categories and data were defined with the values of the top-level chart, clicking in this button will restore to the top-level.
If you create a tree object with all charts and their name/categories/data info, and if you know the current chart, you can set the Chart with its parent data to implement the custom back button.

How do I display add and edit icons for custom function in jqGrid?

I am trying to have custom add and edit functions in jqgrid. I can get the add and edit functions to work correctly, but I can't get the add and edit icons to display correctly. Instead, an arrow(^) appears instead of the plus or edit.
What I've tried:
*Importing jquery-ui before and after the jqgrid
//jqgrid code
$('#jqgrid').jqGrid({
...
})
.navButtonAdd("#pager", {
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(){
$("#lui_jqgrid").show()
$('#addForm').show();
},
position:"last"
})
.navButtonAdd('#pager',{
caption:"Edit",
buttonicon:"ui-icon-edit",
onClickButton: function(){
$('#addForm').show();
},
position:"last"
});
I have the "ui-icon-add" and "ui-icon-edit" under button icon but they are not showing up. This project using backbone.js and I'm importing jquery-ui.js before jqGrid.
How can I get the icons to show up? Instead, I could just have the caption and no icon, but removing buttonicon still shows one.
Update your code with below one. You have some mistakes in your code.
The available buttons are ThemeRoller | jQuery UI, place the cursor the style class will be shown. Use those buttons in jqgrid.
.navButtonAdd("#pager", {
caption:"",
buttonicon:"ui-icon ui-icon-newwin",
onClickButton: function(){
$("#addForm").show();
},
position:"last"
})
.navButtonAdd('#pager',{
caption:"",
buttonicon:"ui-icon ui-icon-pencil",
onClickButton: function(){
$('#addForm').show();
},
position:"last"
});
OutPut on navgrid of jqgrid:

TinyMCE - How to add a button with a name

I know I can add buttons in TinyMCE 4 using addButton . But when I use addButton and enter a title for it, only an empty button is shown in the editor with a tooltip that contains the content of title. How do I add a title, that is actually shown in the menubar, like for the save button?
// Create and render a button to the body element
tinymce.ui.Factory.create({
type: 'button',
text: 'My button'
}).renderTo(document.body);
I found the solution, thanks to Eslam.
You actually just set the 'text' value of addButton:
$('#site_content').tinymce({
setup : function(ed) {
ed.addButton('name', {
text : 'TEXT',
onclick : function() {
}
});
}
});
The documentation of TinyMCE is just awful at some parts, if you'd ask me

ExtJs grid.Panel store: keep scrollbar position after load/reload

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..
I reload the data in the grid using a Task:
var task = {
run: function(){
Ext.getCmp(panelGridId).getStore().load({
//Callback function after loaded records
callback: function(records) {
//Hide grid if empty records
if (Ext.isEmpty(records)) {
Ext.getCmp(panelGridId).setVisible(false);
}
else {
if (Ext.getCmp(panelGridId).isHidden()) {
Ext.getCmp(panelGridId).setVisible(true);
Ext.getCmp(panelGridId).doComponentLayout();
}
}
}
});
},
interval: 60000 //60 seconds
};
Ext.TaskManager.start(task);
After the data load the scrollbar position is reset to the top..
Q: Is there a way to maintain the scrollbar position after the data load?
Thanks in advance!
Try this bad boy to preserve scroll position on refresh:
http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh
This works for me on my tree view.
viewConfig: {
preserveScrollOnRefresh: true
}
Here's how you would use preserveScrollOnRefresh in your Grid :
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
http://jsfiddle.net/cdbm6r0o/7/
However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.
The 'refresh' event is triggered from this code :
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
Additional Notes :
I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.
You can use the preserveScrollOnReload view config property:
viewConfig: {
preserveScrollOnReload: true
},

Categories