PDA

View Full Version : White corners



extjser12
6 Mar 2012, 5:08 AM
Hi together

On my "FormPanel" I have the problem that there is some white background around the corners.
Have a look at my picture for better understandig.



Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 180,
split: true,
layout: 'fit',
items: [
tree
]
}, {
region: 'center',
border: false,
items:[
FormPanel,
GridPanel
]
}]
});
})

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Menu 1", leaf: true },
{ text: "Menu 2", leaf: true}
]
}
});

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
width: 180,
listeners: {
scope:this
}
});

var FormPanel = Ext.create('Ext.form.Panel', {
title: 'Form Panel',
collapsible: true,
frame: true,
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Field Label 1'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 2'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 3'

}],
buttons: [{
text: 'Button 1'
}]
});

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var GridPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
collapsible: true,
height: 800,
forceFit: true,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
});



Can someone help me to fix this?

Thanks in advance.

Regards
extjser12

tvanzoelen
6 Mar 2012, 5:39 AM
Set bodyStyle with background property to none for the panel wich contains the form.



bodyStyle: {
background: 'none !important'
},





Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 180,
split: true,
layout: 'fit',
items: [
tree
]
}, {
region: 'center',
border: false,
bodyStyle: {
background: 'none !important'
},
items: [
FormPanel,
GridPanel
]
}]
});
})

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Menu 1", leaf: true },
{ text: "Menu 2", leaf: true }
]
}
});

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
width: 180,
listeners: {
scope: this
}
});

var FormPanel = Ext.create('Ext.form.Panel', {
title: 'Form Panel',
collapsible: true,
frame: true,
frameHeader: false,
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Field Label 1'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 2'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 3'

}],
buttons: [{
text: 'Button 1'
}]
});

Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: { 'items': [
{ 'name': 'Lisa', "email": "[email protected]", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "[email protected]", "phone": "555-222-1244" },
{ 'name': 'Marge', "email": "[email protected]", "phone": "555-222-1254" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var GridPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
collapsible: true,
height: 800,
forceFit: true,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
});

extjser12
6 Mar 2012, 6:04 AM
Now it works perfectly, thank you very much!