I have been trying to change the orientation of the output in DataTables dynamically depending on how many columns are visible.
I am setting a global variable, dynOrient, that I calculate as the user shows/hides columns. I then have tried setting it in the button options:
buttons: [
{
extend: 'pdfHtml5',
footer: true,
text: 'Download PDF',
orientation: dynOrient, //HERE
customize: function(doc) {
...
}
}
]
This seems to keep whatever dynOrient was when the button was created, without changing it from landscape to portrait later as dynOrient changes.
I have also tried putting it in the customize function:
doc.content[1].pageOrientation = dynOrient;
This didn't do anything, just kept the default portrait no matter what dynOrient is.
How can I dynamically change the orientation of the pdfHtml5 output in DataTables?
I actually just figured out a solution (I don't know if it's the proper solution though).
I put the information for the button into a global variable, and every time a column get's shown or hidden, I re-calculate the orientation, set the orientation manually in the button information, and remove/recreate the button.
var buttonInfo = {
extend: 'pdfHtml5',
footer: true,
text: 'Download PDF',
orientation: dynOrient,
customize: function(doc) {
...
}
};
//some code...
$("input[name='showhideswitches']").click(function() {
var col = $(this).data('col');
myTable.column(col).visible($(this).prop("checked"));
dynOrient = getOrientation();
buttonInfo.orientation = dynOrient; //Manually overriding orientation
myTable.button('0').remove();
myTable.button().add(0, buttonInfo); //Re-create
}
Maybe someone can offer a better solution, but until then I'm going to keep this in since it works for now.
Related
I try to edit my images in the tinymce editor,
I already have an image into it, i try to edit the path of this image to change it dinamically with :
tinymce.activeEditor.selection.getNode().src = '/my/path/'
and it works, the image is edited but when i get the html content of my editor, the src still is the old image.
is there an other way to change the source of the image?
there's an easy way to do this, here take a look :
Create your custom file browser using file_browser_callback : myFileBrowser, in your tinymce.init.
Then in your callback function
function myFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open(
{
file: './test.html',
title: 'My File Browser',
width: 420, // Your dimensions may differ - toy around with them!
height: 400,
resizable: 'yes',
close_previous: 'no',
},
{
window: win,
input: field_name,
},
);
return false;
}
by doing this you tell tiny mce to open a new popup wich is the file 'test.html', and you send to your popup two parameters
window : win, input : field_name.
Then in your test.html you can get those parameters like this :
var args = top.tinymce.activeEditor.windowManager.getParams();
this will give you an object with your parameters and value. you can now use a little jquery or whatever you want to replace the field of your image value with the path of your new image. and then close your popup.
Hope i helped you.
I have a tab panel and every tab has grid in it, but after loading, data in first tab is missing but it displays fine in 2nd tab , this is working in all the browsers in Extjs 4.2 but it is not working in Extjs 5.0 with IE. ( working fine in chrome ) thee is no errors on console. I am getting crazy with this issue. may be it is a bug in Extjs 5. Thanks in advance.
//main panel class
Ext.define('MyApp.view.MyView', {
extend: 'Ext.tab.Panel',
alias : 'widget.myView',
id : 'myView',
autoScroll : true,
activeTab: 0,
height: 600,
layout: {
type: 'column'
},
requires : [
'MyView.view.FirstTab',
'MyView.view.SecondTab'
],
initComponent : function() {
this.items = [
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
{
xtype: 'panel',
id: 'sTab',
autoScroll: true,
items: [ { xtype: 'secondTab' } ]
}
];
this.callParent(arguments);
}
});
//controller
var isActivieTabSet = false;
// if store1 has data show the first tab
if(store1Count > 0) {
var tab0 = myView.down('#fTab');
tab0.tab.show();
if (!isActivieTabSet) {
searchSummaryView.setActiveTab(tab0);
isActivieTabSet = true;
}
} else {
myView.down('#fTab').tab.hide();
}
//check if store2 has data
if(store2Count > 0) {
var tab1 = myView.down('#sTab');
tab1.tab.show();
if (!isActivieTabSet) {
myView.setActiveTab(tab1);
isActivieTabSet = true;
}
} else {
myView.down('#sTab').tab.hide();
}
I see these issues with your code:
you should not set a layout on tab panel. Tab panel uses card layout internally, most likely it ignores any passed layout but if you set it it may be confusing for developers
you set ids on components - they are unique in the code you posted but it may not be true for the whole application. The general rule is not to manually set ids - you don't need them.
you overnest - you don't need to wrap 'firstTab' in 'fTab'. We always try to use the most shallow containment chain possible.
hiding tabs is very unusual. I'm not saying that it wouldn't work but if you need to hide a tab then you can use card layout with some simple switching logic. Tab panel is de-facto a card layout with tab "buttons" to switch the active card.
Otherwise the code does not give a clue why it should misbehave. I would suggest a) fix the above and, if it does not help b) prepare a showcase at https://fiddle.sencha.com so that I can run it and find the real culprit.
Thank you!!
1) Right , No need to specify the Layout on tab panel. I took this out
2) Right, it is a good practice to not add the Ids but we are nesting these components and show/hide by using these ids.
3) Right, that was the first thing that came to my mind, take out the wrapper panel from the grid and it works fine and show up the data but with this we have two issues.
a) In the Grid we are using 'pagingtoolbar' and shows at the botton (same in the whole application)
this.dockedItems = [ { xtype: 'pagingtoolbar', store: this.store, displayInfo: true,
dock: 'bottom' } ];
We are using the CARD layout and when we take out the panel this always shows at the botton even though the grid has only 5 records and It looks very weird and we don't want to put this on top (dock: 'top' )
b) Other issue iis sometime Column Header and data are not aligned
{header: 'Number', dataIndex: 'number', flex: 1 }
if i take out the flex:1 then all the columns get too narrow and half of the vertical space on the right is empty.
4) We have this use case that if grid does not have any data then don't show the tab. so we have to manually show/hide the tab.
Let me combine these classes & upload them (but it may time because I have to take out only the necessary objects :( ).
Thanks you again for your help!!
My Grid is inside the panel and this panel is inside the main tabpanel. if i removed the panel over the Gris then it works fine.
//this does not works (does not show data in first tab)
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
//this works
{
xtype: 'firstTab'
}
I guess this is a bug in Extjs 5.0, same code works in Extjs 4.2 and also in Chrome.
OK, i found the solution, I have to add this on the grid.
bufferedRenderer: false,
In Extjs 5 it is true by default and it is not behaving right in IE when the Grid is inside a Panel with pagination. after this everything works great :) Thanks
I'm newbie in Sencha and when I use Ext.Viewport.setActiveItem Launches view that I want to link but I do full screen, without the two bars up and down, how to tell me not to display it full screen? Thank you!
My code:
{
xtype: 'button',
text: 'Show my other view',
cls:'butview',
listeners: {
tap: function(button, e, eOpts) {
Ext.Viewport.setActiveItem( {xtype:'myotherview'} );
// Ext.Viewport.setActiveItem( 'app.views.myotherview' );
}
}
}
Image (I can not post images because my reputation is still low, the share from google drive)
![show] https://googledrive.com/host/0BwIaci1aJaoTbHB0SmxwX0hJalk/full%20screen..JPG
![as should the load][2] https://googledrive.com/host/0BwIaci1aJaoTbHB0SmxwX0hJalk/normal.jpg
Thankss
If you want to change content between title bar and buttons bar use
http://docs.sencha.com/touch/2.3.2/#!/api/Ext.tab.Panel
Declare all views inside tabpanel.
To switch to another view use
/reference to tabpanel component/.setActiveItem(2)
2 is number of view
I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.
This is a novice question. Hopefully this example can educate myself and others As well as fix my problem.
I have an EXTJS layout that is very similar to the EXTJS complex layout example. A TabPanel is the center piece of this layout. One of the tabs renders a GridPanel that displays some data. I want to click on an Edit icon in the table and open up a separate tab to do the editing.
Here are my issues:
1. If mainTabPnl is defined in view_main.js and the handler in grid.js, how do I add a tab to mainTabPnl? This seems like a scope issue.
2. In the following Firefox line, 't' is undefined. Why?
var t = Ext.getCmp('main-tab-panel');
3. If I try to id my tabs, my whole layout goes haywire. What's happening here?
(see 'center2' tab). I thought that if I could do an Ext.getCmp('center2') I could render something in in from a separate handler.
Thanks for any help on this....
// file: view_main.js
var mainTabPnl = new Ext.TabPanel({
region: 'center',
id: 'main-tab-pnl',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center2',
//id: 'center2', /*!!! screen goes haywire!! why? !!!*/
title: 'Main Panel',
autoScroll: true
}, {
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}]
})
// file: grid.js
var columns = [{
// Column Headers
//...
},{
header: 'Actions',
id: 'actions',
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '/site_media/icons/application_edit.png',
tooltip: 'Edit Record',
handler: function(grid, rowIndex, colIndex) {
alert("Add-Tab "); // The alert works..
/* but mainTabPnl is not defined */
mainTabPnl.add({
title: 'New Tab',
iconCls: 'tabs',
html: 'Tab Body <br/><br/>',
closable:true
}).show();
}
}];
}];
Collect all your UI initialization code into a single call to Ext.onReady made from a single file. This will ensure that the ExtJS library is fully initialized before you begin building your widgets and that interacting widgets are instantiated in the proper order.
Specific answers:
1: There is no "scoping issue" between multiple JS files pulled into the same page through standard includes. Global symbols defined in each file populate the same window object.
2: 'main-tab-panel' doesn't exist yet at the time of that call. Putting all UI initialization into the same Ext.onReady call will prevent this from happening.
3: You are creating a DOM node with an ID identical to that which you are already using for contentEl.