PDA

View Full Version : Is it possible to rotate text in a table cell?



dr-dan
27 Sep 2012, 6:04 AM
The following draw component renders fine in a plain old Container.


var tc = Ext.create('Ext.draw.Component', {
viewBox: false,
autoSize: true,
height: 350,
padding: 0,
items: [{
type: 'text',
text: 'Driving alignment',
fill: 'red',
font: '18px Arial',
rotate: {
degrees: 180
}
}]
});

When that is rendered in a table cell, well, it isnt rendered:


// vertical legend
var items = [{
cellCls: 'v-legend',
rowspan: 7,
items: [tc]
}];


I'm guessing it the problem of using 'items' for a table cell, is that possible?

Tim Toady
27 Sep 2012, 6:36 AM
I grabbed the example table from the API and dropped your component in it so it is certainly possible. More code is needed to diagnose the issue.



Ext.onReady(function () {
var tc = Ext.create('Ext.draw.Component', {
viewBox: false,
autoSize: true,
items: [{
type: 'text',
y: -5,
text: 'Driving alignment',
fill: 'red',
font: '18px Arial',
rotate: {
degrees: 180
}
}]
});
Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 300,
height: 150,
layout: {
type: 'table',
// The total column count must be specified here
columns: 3
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
html: 'Cell A content',
rowspan: 2
}, {
colspan: 2,
items: [
tc
]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}],
renderTo: Ext.getBody()
});
});

dr-dan
29 Sep 2012, 12:38 AM
Full code:

I can only have this work, by moving the draw component creation to the afterrender event and using the renderTo attr (adding an Id attr to the cell I want it) - which obviously isn't ideal


Ext.define('Pegfect.view.RootSquareChart', {
extend: 'Ext.container.Container',
itemid: 'rootSquareChart',
alias: 'widget.rootSquareChart',
border: 0,
layout: {
type: 'table',
columns: 8,
baseCls: 'p-square-chart-layout',
tableAttrs: {
cls: 'p-square-chart-table',
style: { marginLeft: '1px' }
}
},
defaults: { cls: 'p-td-cell', baseCls: 'p-cell', xtype: 'component', autoEl: 'div' },
initComponent: function () {
var me = this;


var tc = Ext.create('Ext.draw.Component', {
viewBox: false,
autoSize: true,
width: 90,
style: { paddingLeft: '10px', textAlign: 'center' },
//renderTo: 'v-legend',
items: [{
type: 'text',
text: _localise('SquareReport.DrivingAlignment'),
fill: '#52493f',
font: '180% "myriad-pro-condensed"',
style: { 'font-weight': '600' },
rotate: {
degrees: 270
}
}]
});


// vertical legend
var items = [{
rowspan: 7,
items: [tc]
}];


// each row
for (var row = 5; row >= 0; row--) {
// first cell contains the star-rating
if (row > 0)
items.push({
cls: 'score score-' + row
});
else
items.push({
cls: 'na',
html: 'N/A'
});
// empty square
for (var cell = 1; cell <= 6; cell++) {
items.push({
cellCls: 'r' + row + ' c' + cell
});
}
}


// horizontal legend - star rating
items.push({}, {
cls: 'na',
html: 'N/A'
});
for (var cell = 1; cell <= 5; cell++) {
items.push({
cls: 'score score-' + cell
});
}
// horizontal legend - title
items.push({
}, {
cls: 'ta-c c-dg fw-600 fs-180',
colspan: 7,
html: _localise('SquareReport.SettingDirections')
});


Ext.applyIf(me, {
items: items
});


me.callParent();
},
display: function () {


}
});

Tim Toady
1 Oct 2012, 6:13 AM
Well, the reason why you cant put it in items of the cell is because you have the default xtype to the tables items as 'component'. The component that holds the rotated text needs to have xtype: 'container' specified for it if you want to do it that way.