I have a panel with header set to left of panel body
Ext.each(configs, function (config) {
Ext.createWidget('panel', Ext.applyIf(config, {
renderTo: 'summaryDiv',
bodyPadding: 2,
headerPosition : 'left',
}));
});
what is the config for making the header title of panel to either read up or down?
please see this http://jsfiddle.net/nwMDj/46/
Related
I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?
There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!
You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
I've only got so far trying to achieve what i've mocked in the screenshot.
Basically, i have a fullscreen reports panel that has 6 panels nested within it. Each of these panels (i'll call them tiles, as that makes more sense) need to be shown at the same time (used the layout:'fix') for the main panel.
Each tile will have a carousel within it that gets it's items populated by means of a single ajax call, if the ajax call returns 3 items then the carousel will have 3 items etc.
I'm having trouble getting the tiles arranged properly, so that they are all shown neatly, and more importantly in a way that will work when the device goes from landscape to portrait mode.
Without worrying about the carousel part too much, trying to get the tiles arranged properly within the panel is a pain. I can pretty much get there with css, by floating... but the first panel always looks messed up. I've since done some some reading trying to achieve a more "sencha" way of doing this.
var rep1 = new PortalDashboard.views.Reportimagetile;
var rep2 = new PortalDashboard.views.Reportimagetile;
var rep3 = new PortalDashboard.views.Reportsinglefigtile
var rep4 = new PortalDashboard.views.Reportimagetile;
var rep5 = new PortalDashboard.views.Reportimagetile;
var rep6 = new PortalDashboard.views.Reportimagetile;
PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
title: 'Dashboard',
html: '',
cls: 'card5',
layout: 'fit',
iconCls: 'team',
styleHtmlContent: true,
initComponent: function () {
Ext.apply(this, {
items: [
rep1, rep2, rep3, rep4, rep5, rep6]
});
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);
--
PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
html: '',
cls: 'dashtilecontent',
initComponent: function () {
Ext.apply(this, {
html: '<h1>99.99%</h1>'
});
PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);
Fit layout is used to show a single item at a time so using it as the layout for your dashboard panel won't work. Besides writing a custom layout to achieve the 3x2 tile effect in your mock up I would set the layout of the dashboard to
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
}
so now any items you add will be in the center of the panel body and stack vertically.. so add 2 panels for each of the rows and on those panels use an hbox layout and add 3 cards to each of those panels
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
}
(those align or pack settings might not suit your needs if you plan to have different sizes on different boxes, in which case you'll need to use the flex property to give the boxes the proportions you want)
I’m newbuy on Sencha framework. I read the partial guidebook which I have found on the website to try to create some panels with tabs and buttons.
I would like to be able to understand how to create a my “events.js file” where putting the touch gesture event and calling them back into a mean myJS.js file. Particularly, in “dockeditems” which I have created for my mean panel, I have declared a tabPanel, some buttons and a panel where I have specified, as ‘html’, a .svg design file containing a planimetry. I wish I could apply ONLY on this last panel, containing this planimetry (for scaling by fingers), the TOUCH gesture events as PINCH, TAP, etc… How can I do this ?
Could you let me see a very simple example of the way to use a touchEvent.js file (which I have to implement) and how to connect it to the mean file containing the EXT.SETUP( …. onReady…..) ?
Something like that:
(myEventTouch.js)
myHandler = function() {“Pinching”};
(myPrincipalFile.js)
Ext.setup ({ onReady: function(){
new Ext.panel({ dockeditems: myitems })
}
var dockedItems = [{
xtype: 'toolbar',
title: 'Planimetry',
ui: 'dark',
dock: 'top',
items: “ some buttons “,
},
{
id:'html',
dock:'left',
width: '75%',
// HERE THERE IS THE CRITICAL POINT
html: '<object data="planimetry.svg" style="width: 100%; height: 100%" type="image/svg+xml" id="plan"/>',
handler: myHandler // HERE I WISH CALL BACK MY HANDLER
},
{
dock:'right',
width:'25%',
xtype:'tabpanel',
items: [“something”]
})
Thanks in advance :)
p.s.
sorry for my english (i'm italian :P)