I've got a simple ExtJS grid, and can't seem to get the column headers to show up. the data shows up in the rows just fine, and the entire dataset fits in the assigned space with room to spare. The grid is rendered into a div that itself is the source of a modal dialog. What am I missing?
HTML code:
<div id="wrapperdiv" style="display:none"></div>
Dialog code:
$('#wrapperdiv').dialog({
title: 'title',
resizable: false,
modal: true,
width: 700,
height: 300,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
Grid code:
var panel = Ext.create(
'Ext.grid.Panel',
{
border: true,
autoScroll: true,
width: 680,
height: 200,
layout: 'fit',
id: 'theGrid',
renderTo: 'wrapperdiv',
columns:
[
{ text: 'Col1', flex: 1, dataIndex: 'col1', hideable: false, sortable: true },
{ text: 'Col2', width: 120, align: 'center', dataIndex: 'col2', hideable: false, sortable: false },
{ text: 'Col3', width: 70, align: 'center', dataIndex: 'col3', hideable: false, sortable: false },
{ text: 'Col4', width: 100, align: 'center', dataIndex: 'col4', hideable: false, sortable: false }
],
store: dataStore
});
Works fine without any issue.
Check the fiddle link here -
http://jsfiddle.net/nGdM3/2/
I would like to give one suggestion though - instead of using jquery dialog box combined with Extjs Grid Panel, you can use extjs window.
Related
I'm building an application using Ext.js, and I built a grid panel, and I'm loading data every 14 seconds. When the scrollbar appears on the panel, it appears an white space that I'm trying to remove but I don't know how, I already tried to overwrite the ID that contains the timeline and change the color, but it didn't work because Ext.js generated the CSS code again and every changes disappeared.
Demo
Is it possible to hide this white space?
My code:
Ext.define('ES.view.Layout.Menu.Menu', {
extend: 'Ext.grid.Panel',
alias: 'widget.timelineBar',
controller: 'menu',
viewModel: 'menu',
autoScroll: true,
title: 'Timeline',
bodyStyle: 'background: #2b5876;',
store: {
type: 'timeline'
},
columns: {
border: false,
defaults: {
hoverCls: ''
},
items: [{
text: locale.time,
flex: 1,
dataIndex: 'time',
align: 'center',
height: 60
},
{
text: locale.address,
dataIndex: 'address',
flex: 1,
align: 'center',
height: 60
listeners: {
click: 'onItemClick'
},
},
{
text: locale.dir,
dataIndex: 'dir',
flex: 1,
align: 'right',
height: 60
}
]
}
});
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
I am using ExtJS HTMLEditor and set the properties as follows-
{ xtype: "htmleditor", width: 500, height: 250}
While entering the text, after reaching the specified height, the toolbar gets disappeared.
I tried removing the height and setting autoHeight: true but in both cases the HTML editor does not fit to the window (HTMLEditor is inside Ext.form.FormPanel).
Anyone having idea to solve it.
This is my code
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
autoHeight: true,
items: [
{ allowBlank: false, xtype:
"htmleditor", height: 250, width: 600, anchor:'100%'}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I have solved the problem- Added layout: 'fit' to Formpanel
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
layout: 'fit', // This fixed the issue
items: [
{ allowBlank: false,
xtype: "htmleditor",
height: 250,
width: 600
}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I am creating a page that only contains a gridpanel, I want my gridpanel to have scrollbars based on the browser size. To do this I am wrapping it in a viewport as discussed here and making sure I specify a layout as discussed here. The grid renders fine but I am not getting any scroll bars. I've tried 'fit', 'border' and 'anchor' layouts but still no luck. The code looks like this:
Ext.create('Ext.Viewport', {
items: [{
region: 'center',
layout: 'fit',
xtype: 'gridpanel',
store: myStore,
loadMask: true,
columns: [{
header: 'Account ID',
dataIndex: 'acct_id',
width: 70
}, {
header: 'First Name',
dataIndex: 'first_name',
width: 120
}, {
header: 'Last Name',
dataIndex: 'last_name',
width: 120
}, {
xtype: 'numbercolumn',
header: 'Account Balance',
dataIndex: 'acct_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Credit',
dataIndex: 'credit',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Debt',
dataIndex: 'debt_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}],
}]
});
You should set fit layout to Viewport:
Ext.create('Ext.Viewport', {
layout: 'fit',
items: [...]
});
Setting layout in GridPanel have no effect.
I am using grid component, when users double click on records - open window, here is my code:
var gridPanel = Ext.create('AB.ins.Grid', {
title:'Grid Panel',
allowBlank: true,
style: {
cursor: 'default'
},
store: insuranceStore,
columns: [
{header:'№', dataIndex: 'id',width: 45, align: 'right'},
{header:'Name', dataIndex: 'fio', width: 250},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: insuranceStore,
itemId: 'pagingbar',
dock: 'bottom',
displayInfo: true
}],
listeners: {
itemdblclick: function(obj,record,item,index,event,options) {
var testshow = Ext.create('Ext.Window', {
width: 500,
height: 600,
modal: true,
title: 'Test window'
});
testshow.show();
}
}
});
In FF this code works fine. In IE7 this code works, but when i closed window in the third or fourth time IE show errors 'events is null or not an object'. What occurs?
IE doesn't like trailing commas, and it usually cause bizarre error messages. In later versions of IE it doesn't seem to be as big a problem.
Change your columns definition to this...
columns: [
{header:'№', dataIndex: 'id',width: 45, align: 'right'},
{header:'Name', dataIndex: 'fio', width: 250}
],
Notice the trailing comma on the second item has been removed