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
}
]
}
});
Related
I have finished an application and I am in the process of minification. When I build the application I am getting duplicate components rendered. I noticed this when I was testing the application. Whenever I have a grid, there is another one getting painted under it with the same exact attributes. I used Ext.ComponentMgr.all.map to see all my application's components- when I did this I noticed that the un-built version had 1 app-main components and the minified had 2. At first I thought I could attribute this to warnings or errors in the un-built version. But when I run it in chrome/IE, I am not seeing any console warnings or errors.
Is there any way to tell what is causing this error? Below is my main view that gets invoked in the Viewport.js file. each of those views have their respective aliases defined properly.
Ext.define('MPL.view.MPLView', {
extend: 'Ext.container.Container',
requires: [
'Ext.grid.Panel',
'MPL.view.QuotePanelView',
'MPL.view.SearchPanelView',
'MPL.view.PartsPanelView',
'MPL.view.SvcPartsPanelView',
'MPL.view.ConsumedPartsView'
],
xtype: 'app-main',
layout: 'column',
overflowY: 'auto',
items: [
{
xtype: 'SearchPanel',
columnWidth: 1
},
{
xtype: 'QuoteGrid',
columnWidth: 1,
overflowY: 'auto',
height: 200
},
{
xtype: 'PartGrid',
overflowY: 'auto',
columnWidth: 1,
height: 250,
margin: '20 0 0 0',
hidden: true
},
{
xtype: 'SvcPartsGrid',
overflowY: 'auto',
columnWidth: 1,
height: 250,
margin: '20 0 0 0',
hidden: true
},
{
xtype: 'ConsumedPartsGrid',
overflowY: 'auto',
columnWidth: 1,
height: 250,
margin: '20 0 0 0'
}
],
listeners: {
.....
}});
This is what my app.js looks like:
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : 'MPL',
extend : 'MPL.Application',
appFolder : 'app',
requires : [ 'overrides.Theme' ],
controllers : [ 'MPLController' ],
models : [
'MPLModel',
'SearchCriteriaModel',
'PartsModel',
'LaborCodeModel',
'PartFieldsModel',
'SourceModel',
'PartsActionModel',
'ConsumedPartsModel'
],
stores : [
'MPLStores',
'SearchCriteriaStore',
'PartsStore',
'LaborCodeStore',
'PartFieldsStore',
'SourceStore',
'PartsActionStore',
'ConsumedPartsStore'
],
autoCreateViewport : true
});
I have placed console.logs and made beforerender listeners on the grids that get duplicated. Again, in the minified version I see two logs in the console and in the un-minified, I only see one.
Still battling this - here is an example of one of the grids that gets duplicated
Ext.define('MPL.view.QuotePanelView', {
alias: 'widget.QuoteGrid',
extend: 'Ext.grid.Panel',
id: 'QuotePanel',
store: 'MPLStores',
columns: [
{ header: MPL.str.getQuoteIdHeader(), dataIndex: 'quoteId', flex: .9},
{ header: MPL.str.getManufacturerHeader(), dataIndex: 'manufacturer', flex: 1.2},
{ header: MPL.str.getVinHeader(), dataIndex: 'vin', flex: 2},
{ header: MPL.str.getYearHeader(), dataIndex: 'year', flex:.8},
{ header: MPL.str.getMakeHeader(), dataIndex: 'make', flex: 1},
{ header: MPL.str.getModelHeader(), dataIndex: 'model', flex: 1},
{ header: MPL.str.getSalesIdHeader(), dataIndex: 'salesPersonId', flex: 1.23},
{ header: MPL.str.getCustIdHeader(), dataIndex: 'customerId', flex: 1},
{ header: MPL.str.getQuoteStatusHeader(), dataIndex: 'status', flex: 1},
{ header: MPL.str.getCreatedDateHeader(), dataIndex: 'createdOn', dateFormat: "Y-m-d", flex: 2}
],
listeners: {
itemclick: function(dv, record, item, index, e) {
MPL.app.fireEvent("FindParts", dv, record, item, index, e);
},
beforerender: function(component, eOpts){
console.log(' id - ' + component.getId());
}
}
});
I hacked my way through this problem. I handled it in the beforerender function of each of the duplicate components. Since I noticed that the renderer was rendering the same exact item, I took the liberty of deleting it and everything that was attached to the previous version.
beforerender: function(component, eOpts){
if(!alreadyRendered){
alreadyRendered = true;
previousComponent = component;
}
else{
previousComponent.removeAll(true);
}
}
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%'
Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}
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.
I need align the formpanels to the center, so I used the vbox layout, and after I used it the autoscroll did not work as before, the code is as below:
Usr.VWPanel = Ext.extend(Ext.Panel, {
id: null,
rid: null,
closable: true,
autoScroll: true,
buttonAlign: 'center',
layout: {
type:'vbox',
padding:'5',
pack:'center',
align:'center'
},
initComponent: function () {
Ext.apply(this, {
items: [
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.usrform',
itemId: 'usr.vwpain.usrformt',
width: 600,
height: 500
},
{
xtype:'spacer',
height: 16
},
{
xtype: 'usr.loginform',
itemId: 'usr.vwpain.loginform',
width: 600
},
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.subsform',
itemId: 'usr.vwpain.subsform',
width: 600
}],
...
plz advise.
the vbox layout will never show the scroller.
{
xtype: 'window',
title: 'My Window',
width: 500,
height: 500,
layout: 'vbox',
layoutConfig: {
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'panel',
title: 'My Panel',
anchor: '80% 100%',
height: 300,
width: 300,
autoScroll: true,
items: [
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
}
]
}
]
}
in your css you can set your My Panel margins to {0 auto} which will center the My Panel inside the window. This means you don't need a special layout config for your window.
I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change scroller height remain constant.
Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
fn: function(el) {
this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it.
console.log("new height = " + this.up('window').getHeight()-150);
}
}
},
title: "Update Data Configurations",
Hopes this help.