I am using ExtJS 4.2.3
I need a panel to collapse with an animation with a left and right direction.
there are 2 panels the reside in an hbox container.
here is how I am calling the collapse
var me = this,
direction = NG.isRTL() ? Ext.Component.DIRECTION_LEFT : Ext.Component.DIRECTION_RIGHT;
me.collapse(direction);
No matter what I pass for the direction field I alweys get the animation working from right to left. (I need it the other way around)
I have searched the web for it but no one seems to talk about it.
Please see the image I have attached where I have captured the animation half way through.
UPDATE:
Here is a fiddle to demonstrate what I am talking about:
example
It looks like there could be a bug, see https://fiddle.sencha.com/#fiddle/j4p. However, if you want collapsible panels on the right side to collapse to the right, you should just use a border layout. See https://fiddle.sencha.com/#fiddle/j4q
Ext.create('Ext.panel.Panel', {
width: 500,
height: 200,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south',
height: 75,
split: true
},{
title: 'East Region is collapsible',
region:'east',
width: 100,
collapsible: true,
},{
title: 'West Region is collapsible',
region:'west',
width: 100,
collapsible: true,
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel'
}],
renderTo: Ext.getBody()
});
<link href="http://docs-origin.sencha.com/extjs/4.2.2/styles-3eba09980fa05ead185cb17d9c0deb0f.css" rel="stylesheet"/>
<link href="http://docs-origin.sencha.com/extjs/4.2.2/resources/css/app-4689d2a5522dcd3c9e9923ca59c33f27.css" rel="stylesheet"/>
<script src="http://docs-origin.sencha.com/extjs/4.2.2/extjs/ext-all.js"></script>
Related
I am trying to add scrollbar to kendo witndow with fixed height but it is not worked.
Please help me , below are my code
var Employee= $('#EmpData');
Employee.kendoWindow(
{
title: "Employee Data",
width: "779px",
height: "700px",
animation: false,
resizable: false,
modal: true,
actions: [
"Minimize",
"Maximize",
"Close"
],
visible: true,
// scrollable: true
}).data('kendoWindow');
$('#EmpData').data('kendoWindow').center().open();
As if data is more than popup size then it cuts ,i need to show scrollbar to kendo window if data exceeds.
Please help me.
Thanks
I'm using Extjs 6.0 (with Framework Codeigniter 3.0.3).
I'm trying to get something like this:
+---------------------------+-------------+
| something | something | something |
+-------------+-------------+-------------+
| Label A| Label B |
+-------------+-------------+-------------+
I'm using table layout (Label A with colspan 2).
The problem is I need different aligning in Label A and Label B (right and center respectively).
Is there a way to accomplish this?
This is the code:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 400,
height: 200,
layout: {
type: 'table',
columns: 3
},
items: [{
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
},{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
}, {
xtype: 'label',
text: 'Label B',
padding: 5
}],
});
For Label A, I've tried adding (without effect):
align: 'right'
textAlign: 'right'
labelAlign: 'right'
If I add:
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
textAlign: 'right'
}
}
}
Then both Label A and Label B align to the right, and that's not what I need.
you can use the following code to align Label A to the right:
{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
style:{
"float":"right"
}
},
Labels are somehow special, presumably because they are made for the purpose to be used by labelable. A label is intended to be used together with a field, and when you click the label, that field is focused. The labelable mixin of the field does the aligning (based on the labelAlign configuration), and label does not always respect the layout you ask for.
While the answer of #Saloo seems to work, it is a hack that may break in other themes and/or older browsers and/or different versions of the framework.
It would be better to use different means of displaying text. I have come to use a container with the html configuration. With a container, style:{textAlign:"right"} works as intended, and since "text-align" is a local CSS setting that does not require the browser to think outside the box, it should be safe enough to use across browsers, across themes, across framework versions.
I am trying to create an area chart with gradient, like shown in the image.
I don't see where can I specify the gradient. I have created a CSS class and tried to add it to the chart series
var graph_lc2 = new Rickshaw.Graph({
element: document.getElementById("linechart2"),
height: 100,
renderer: 'area',
stroke: true,
preserve: true,
series: [{
className: 'my-gradient',
data: seriesData[1],
name: 'Demo'
}]
});
Any ideas?
How do I remove the border around the swatches in the legend of a JQPlot graph? Below is my code. There is a border around the swatches, but the border is bigger than the square and I would prefer to remove it. Then this might be a second question (and I will remove if someone just answers one or asks me to): I have 4 sets of the raw data for every slice. How to I show more of this data in the legend (eg: the name and the amount and percentage)
Below is the code I have:
var budgetGraph = [["GROCERIES",4194.02,57.95302704323518,10],["BUSINESS MISCELLANEOUS",918.19,12.68756226742555,102],["HEALTHCARE/MEDICAL",729.65,10.082313909351063,11],["HOBBIES/SPORT",502.56,6.944381111880313,34],["OTHER EXPENSES",492.7,6.808135493918,19],["Other",399.81,5.524580174189884,0]];
var plot1 = jQuery.jqplot ('budgetGraph', [budgetGraph],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
},
seriesColors: graphColours.pie
},
legend: {
renderer: jQuery.jqplot.PieLegendRenderer,
show: true,
renderOptions: {
numberColumns: 3
},
location: 'e',
placement: 'outside',
border: 'none'
},
grid: {
drawGridLines: false, // wether to draw lines across the grid or not.
gridLineColor: 'transparent', // CSS color spec of the grid lines.
background: 'transparent', // CSS color spec for background color of grid.
borderColor: 'transparent', // CSS color spec for border around grid.
borderWidth: 0.0, // pixel width of border around grid.
shadow: false // draw a shadow for grid.
}
}
);
You can remove the outline by overriding the css class:
.jqplot-table-legend-swatch-outline { border: 0 solid #CCCCCC;}
For your second question you can use the "labels" option of the legend:
legend: {
show: true,
location: 'ne',
placement: "outside",
labels: legendLabels
}
and before calling the jqplot function populate the legendLabels array like this:
var legendLabels= ['label1 with data or %', 'label2 with data or %', 'label3 with data or %'];
I have an Image Component in ExtJS which loads an image via URL like this:
{
xtype: 'image',
width: 200,
height: 200,
src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
},
The image is displayed at 100%. 200x200 px are shown and the rest is clipped. I didn't find any property to allow scaling.
What is the best way to achieve a resizing image in ExtJS?
You can use xtype:'image' , shrinkWrap:true
Please check with Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap
A bit late...but I think this is kind of what you wish to have, I happened to use the image as a scaled background behind a panel instead of an image on top inside a panel, but the theory is the same:
//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
extend: 'Ext.container.Viewport', //my root view port
layout: {type: 'fit'},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container', //my background image
html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
layout: {type: 'border'},
items: [{
xtype: 'panel', //my panel on top of background
region: 'center',
bodyCls: 'transparent',
title: 'My Panel'
}]
}]
});
me.callParent(arguments);
}
});
Note that I didn't use image component, I used a container. html: <img ... and bodyCls: transparent... did the trick. You can change the image dynamically in a handler. Something like this:
//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
backgroundImage: 'wallpaper.jpg',
width: '100%',
height: '100%'
}).show();