I have a bunch of tbar items displayed in new lines. It works fine.
But the only issue I am having is that displays a horizontal border between each tbars.
How can I remove that?
items: [
{
xtype: 'panel',
id: 'navi',
region: 'west',
collapsible: false,
title: 'Navigation',
bodyStyle: 'background-color: #BFCBD5',
width: 155,
animCollapse: true,
minHeight: 600,
items: [
{
border:0,
tbar: [
{
xtype: 'button',
text: 'Home',
textAlign:'left',
width: 140,
align:'left',
//bodyStyle: 'background-color:#BFCBD5;',
handler: function() {
document.location.href = BasePath;
}
}
]
},
{
border:0,
tbar: [
{
xtype: 'button',
text: 'Dashboard',
textAlign:'left',
width: 140,
handler: function() {
document.location.href="http://www.dtvdashboard.com";
}
}
]
},
{
xtype: 'text',
padding: '64 0 0 0',
text: "Logged in as:",
textAlign:'left',
style : "color:#3E546B;font-style:italic;font-size: 11px;",
width: 140,
handler: function() {
document.location.href="";
}
},
]
}
]
EDIT: I added bodyBorder:false, that kinda removed the border line. But i still see lighter shade of the border
There is plenty of possibilities to remove that border.
you can remove tbar and stick to the buttons only (example: http://jsfiddle.net/kKjuC/1/)
you can render links as plain html and attach click handler to each one or to the container or just simply add href to links (example: http://jsfiddle.net/YeyET/1/)
you can use DataView
Related
I am trying to achieve a specific kind of layout. My effort so far can be previewed from this fiddle example.
Basically I need to make my left container (fixedContainer) with red border containers, to have fixed position and be fully visible when I scroll horizontally. But when I scroll vertically it needs to scroll normally with rest of the containers.
Current code:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout:'vbox',
scrollable:true,
items:[{
xtype:'container',
reference:'mainContainer',
layout:{
type:'hbox'
},
margin:10,
items:[{
xtype:'container',
reference:'fixedContainer',
style:'position:relative;',
defaults:{
style:'border: 1px solid red;',
left:100,
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},{
xtype:'container',
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}]
}]
}).show();
If I understood what you are looking for, you need to change a few layouts in your code. First you need to make your window a layout: 'fit', so that it's child's fit into the window container.
Then set your mainContainer to a layout: border and set both the child panels to region: 'west' and region: 'center' respectively. This anchors your fixedContainer to the left and your scrollableContainer to the center.
Finnally, add the scrollable: "horizontal" property to your scrollableContainer to scroll horizontally.
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
scrollable:true,
items:[
{
xtype:'container',
reference:'mainContainer',
layout: 'border', // Changed this
margin:10,
items:[
{
xtype:'container',
region:'west', // Added this
reference:'fixedContainer',
defaults:{
style:'border: 1px solid red',
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},
{
xtype:'container',
region: 'center', // Added this
scrollable: "horizontal", // Added this
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}
]
}]
}).show();
EDIT1:
As #Evan Trimboli stated, the first code sample did not respect the vertical scrolling on panels overflow, this second sample sets the border layout to scroll vertically. The scrollContainer is wrapped into an additional container that will satisfy the vertical scroll. The remaining code stays the same from the initial answer.
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
items: [{
xtype: 'container',
reference: 'mainContainer',
scrollable: 'vertical', // #edit1: Added this
layout: 'border', // Changed this
margin: 10,
items: [{
xtype: 'container',
region: 'west', // Added this
reference: 'fixedContainer',
defaults: {
style: 'border: 1px solid red',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}, {
xtype: 'container', //#edit1: New container here to satisfy the vertical scroll
region: 'center',
items: [{
xtype: 'container',
scrollable: "horizontal", // Added this
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}]
}]
}]
}).show();
Ok this is my working solution for this issue
Ext.application({
name: 'Fiddle',
launch: function () {
var horizontalScroll = 0
var gridwindow = Ext.create('Ext.window.Window', {
referenceHolder: true,
title: 'Hello',
height: 500,
width: 700,
layout: 'vbox',
scrollable: true,
items: [{
xtype: 'container',
reference: 'mainContainer',
layout: {
type: 'hbox'
},
margin: 10,
items: [{
xtype: 'container',
reference: 'fixedContainer',
style: 'position:relative; z-index:10; box-shadow: -20px 0px 0px 1px #fff;',
defaults: {
style: 'border: 1px solid red; outline',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}, {
xtype: 'container',
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}]
}]
}).show();
gridwindow.body.on('scroll', function (event) {
var scrollLeft = event.target.scrollLeft;
if (horizontalScroll !== scrollLeft) {
var fixedContainer = this.lookup('fixedContainer');
fixedContainer.el.translate((scrollLeft), 0)
}
horizontalScroll = scrollLeft;
}, gridwindow);
}
});
https://fiddle.sencha.com/#view/editor&fiddle/28ug
Thanks all for the effort. Hopefully this is good enough to help someone else with a similar problem.
I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});
I have a problem with a collapsible panel that is an item of a panel with border layout in ExtJS 4.2.2.
Basiclly it is the following structure:
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
height: 400,
width: 600,
title: 'TestPanel',
renderTo: Ext.getBody(),
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
{
xtype: 'panel',
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
{
xtype: 'panel',
layout: 'border',
height: 600,
width: 200,
items: [
{xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
{xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
]
}
]
}
]
});
});
Here is the corresponding fiddle:
http://jsfiddle.net/jLugR/
When you uncollapse the option panel everything works fine. When you collapse it again, it breaks the layout. Do you have any idea what the problem is and how I can handle it?
Looks like child panel's(border layout) height is more than the parent panel's height.. Make sure that the height of all child elements together not exceeds parents height.
Check the fiddle by changing the height of the panel with border layout to 250, it works..
Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.
I have a form with a button at the end like this:
var simple_form_right = new Ext.FormPanel({
frame:true,
labelWidth: 90,
labelAlign: 'right',
title: 'Orderer Information',
bodyStyle:'padding:5px 5px 0',
width: 300,
height: 600,
autoScroll: true,
itemCls: 'form_row',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Customer Type',
name: 'customerType',
allowBlank:false,
value: 'Company'
}, .... {
fieldLabel: 'Item 21',
name: 'item21',
value: 'test'
},
new Ext.Button({
text: "Cancel Order",
style: 'width: 100%; color: red',
handler: function() {
alert('pressed');
}
})
]
});
The button works but as the style information attempt indicates, I would like the button to extend across the form and have red text.
How can I make the button's width extend across the form and have red text inside the button?
Addendum
Robby's solution works 100%:
...
}, {
fieldLabel: 'Item 20',
name: 'item20',
value: 'test'
}, {
fieldLabel: 'Item 21',
name: 'item21',
value: 'test'
}, {
xtype: 'button',
text: '<span style="color:red">Cancel Order</span>',
anchor: '100%',
handler: function() {
alert('pressed');
}
}
Change your button definition to.
{
xtype: 'button',
text: '<span style="color:red;">Cancel Order</span>',
anchor: '100%'
handler: function() { alert('pressed') };
}
For the anchor property to work your button can't be in the 'buttons' array of a panel.