I want my div to look like this
<div id="example" customAtt="try"></div>
How can I add custom attribute to panel,button etc. in sencha?
thank you
If it's a Ext.Component, you can do the following
listeners: {
afterrender: function (component) {
component.getEl().dom.setAttribute("myCustomAttribute", "SOME_VALUE");
}
}
You can use autoEl in classic framework:
Ext.create({
xtype: 'component',
renderTo: Ext.getBody(),
html: 'Hi !!!',
id: "example",
autoEl: {
customAtt: "try"
}
});
Crate ...
<div class="x-component x-component-default x-border-box" customatt="try" id="example">Hi !!!</div>
You can easily add custom attributes, the same way you define config attributes.
mycont = {
xtype: 'container',
id: 'cont123',
width: 300,
height: 100,
customAttribute1: customAttribute1Value
customAttribute2: customAttribute2Value
...
}
Related
We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...
In essence, we already have have this:
Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.
We'd like to build:
Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request
Obviously some redundancy. How can we manage the dependencies?
While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.
I post this out of code simplicity. It should be in a function, to maintain code re-usability.
<?php
$TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
$TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';
$Data = "
{
chart: {
zoomType: 'xy',
width: 700,
height: 520
},
credits: {
enabled: false
},
colors: [
'#2f7ed8',
'#910000',
'#8bbc21',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
title: {
text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
style: {
fontSize: '16px',
}
},
xAxis: [{
categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
}],
yAxis: [{
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y axis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Sec Yaxis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'first',
type: 'spline',
yAxis: 1,
data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
},
{
name: 'second',
type: 'spline',
yAxis: 1,
data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
},{
name: 'third',
type: 'column',
data: [10, 11, 9, 7, 5, 2, 7]
},{
name: 'fourth',
type: 'column',
data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
}]
}";
try {
$myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
fwrite($myfile, $Data);
fclose($myfile);
} catch (Exception $e) {
echo 'Error: '.$e.' <br />';
}
$URL_Command = "phantomjs /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
exec($URL_Command);
echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';
?>
I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.
We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.
i need to add two boxes in the north section of a layout border
it would be something like this : in red the boxes / panels i need to add (but i dont want to keep borders)
here is my try :
...
{
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'anchor',
items: [{ xtype: 'box', id: 'header', height: 100, anchor: '70%',
html: '<h1> my title</h1>'},
{
xtype: 'panel', title: 'title', border: 'false', frame: false, height: 100,
html: '<h1> my info</h1>'
}]
}
...
the second panel doesnt work
thanks for ur help
If you want further partition of your north panel, then you should use layout:'border'.
Otherwise you can add your items to the north region derectly without using layout.
If you don't want the border,You should use border:false
You would be better using a border layout again in the north region...
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'border',
items: [{
xtype: 'box',
id: 'header',
region: 'center',
height: 100,
anchor: '70%',
html: ' my title'
}, {
xtype: 'panel',
region: 'east'
border: 'false',
frame: false,
height: 100,
width: '49%',
html: ' my info'
}]
...
That should work okay.
I want to use a layout where components are added horizontally like hbox but where upon adding if the component exceed the bounds of the container it is moved to the next line. This is similar to what FlowLayout is in swing and flex.
I couldn't find any layout in ExtJS 4.0 that would achieve this.
So I am wondering how I would go about doing this. I am fairly new to the framework so any pointers would be great.
Have you tried using ColumnLayout? If you don't specify the "columnWidth" properties, the child elements are css-floated from left to right:
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "ColumnLayout Panel",
layout: 'column',
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'First Inner Panel',
width: 250,
height: 90
},{
xtype: 'panel',
title: 'Second Inner Panel',
width: 200,
height: 90
}, {
xtype: 'panel',
title: 'Third Inner Panel',
width: 150,
height: 90
}]
});
In the attached image, the grid does not show properly. The grid is inside a tabpanel. The layout of the tab is = 'fit'.
What setting error is causing the behavior?
EDIT:
Here is the class definition for the tabpanel: Our tab is the one called 'External ID'
/*
* File: SomeTabPanel.ui.js
* Date: Mon May 02 2011 18:08:34 GMT-0400 (Eastern Daylight Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/
SomeTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
forceLayout: true,
border: false,
enableTabScroll: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
title: 'General',
layout: 'table',
tpl: '',
ref: 'GeneralTab',
layoutConfig: {
columns: 2
},
items: [{
xtype: 'form',
title: 'Corporate',
height: 500,
width: 500,
animCollapse: false,
items: [{
xtype: 'box',
ref: '../../coporateBox'
}]
}]
},{
xtype: 'panel',
title: 'External ID',
layout: 'fit',
ref: 'ExtIdTab',
id: ''
}];
SomeTabPanelUi.superclass.initComponent.call(this);
}
});
Looks like you need to set a height for the grid somehow. Either a manual height declaration, autoHeight: true, or inherited height from a parent container.
Does the parent tabPanel have a height declared/inherited?
Setting layout: 'fit' is a good start for the containing tab, but without some code or a test case, I can't be more helpful.
It should work as described, so you must have something wrong in your code. Post your layout code if you want more help.
I am trying a implement a really simple layout using BorderLayout.
var summary = new Ext.Panel({
region:'west',
id:'summary',
title:'Summary layout',
header: true,
split:true,
collapseMode: 'mini',
collapsible: true,
width: 200,
minSize: 175,
maxSize: 400,
layout:'vbox',
align: 'stretch',
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
flex: 1
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings',
flex: 1
}]
});
The layout renders well, but when I change the width using the handle, the two panels inside the vbox don't resize.
I tried any kind of configuration I thought of, but i did not work.
(layout fit, width auto, autoWidth, etc...)
What do I miss? Thanks
For me, it doesn't work.
But this code works :
layout:{
type:'vbox',
align:'stretch'
}
I finally found by myself.
I set the layout options not correctly
I had to change to
...
layout:'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
...