I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..
var win = Ext.create('Ext.Window', {
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
items: [
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'From',
anchor: '90%'
},
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'To',
anchor: '90%'
},
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
},
{
xtype: 'tabpanel',
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [
{
title: 'Normal Tab',
items: [
{
id: 'chartCmp',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
grid: true,
fields: ['name']
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}
]
}
]
},
{
title: 'Table View',
xtype: 'grid',
width: 200,
height: 200,
collapsible: false,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [
{
text: 'Devices',
flex: 50,
dataIndex: 'name'
},
{
text: 'Pass',
flex: 50,
dataIndex: 'data1'
}
]
}
]
}
]
});
On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :
var tab = Ext.getCmp('tabId');
var chart = Ext.getCmp('chartId');
change lengths of tab and chart according to your requirement.
Check out window resize event here.
Related
I'm Using Ext Js v6.2, In my application I have accordion has two panel Misc.Charge & Other Charges, In ext js default first accordion panel [Misc Charge] is open always, but I need second accordion panel [Other charges] to set default open, always. Here's my code, I've searched in documentation and other stuff it doesn't help. please solve the problem. thanks in advance.
{
flex: 1,
xtype: 'panel',
frame: true,
border: false,
cls: 'panel-primary',
anchor: '0',
height: 100,
width: '100%',
layout: 'accordion',
autoScroll: true,
layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
},
items: [
{
flex: 1,
// xtype: 'panel',
form: true,
anchor: '0',
height: 100,
title: 'Mis.Charge',
frame: true,
html: '<div style="width:135px;height:100px;">',
header: {
height: 27,
padding: 0
},
layout: {
type: 'hbox',
align: 'stretch',
columns: 1
},
items: [
{
// / xtype: 'fieldcontainer',
flex: 1,
id: 'upper',
height: 100,
width: 100,
bodypadding: '30',
html: '<div style="width:135px;height:100px;">',
items: [gridStore,
{
// xtype: 'panel',
flex: .5,
height: 90,
width: 207,
bodypadding: '30',
html: '<div style="width:135px;height:100px;">',
items: [stores]
},
{
xtype: 'splitter'
},
{
xtype: 'splitter'
},
{
xtype: 'textfield',
fieldLabel: 'Total Product Value',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
readOnly: true,
fieldCls:'TotalValue',
labelWidth: 245
},
{
xtype: 'textfield',
fieldLabel: 'Total Other Charges ',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
fieldCls: 'TotalValue',
readOnly: true,
labelWidth: 245
},
{
xtype: 'textfield',
fieldLabel: 'Total Invoice Values',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
fieldCls: 'TotalValue',
readOnly: true,
labelWidth: 245
}
]
},
]
},
{
xtype: 'panel',
title: 'Other Charges',
height: 700,
form: true,
anchor: '0',
// cls: 'panel-primary',
html: '<div style="width:135px;height:100px;">',
width: 600,
frame: true,
header: {
height: 27,
padding: 0,
},
layout: 'vbox',
items: [
{
// xtype: 'panel',
// flex: 1,
// height: 180,
// width: 600,
// bodypadding: '30',
items: {
xtype: 'panel',
flex: 1,
height: 180,
width: 620,
bodypadding: '30',
items: [
{
xtype: 'fieldcontainer',
flex: .5,
height: 22,
// width: 410,
bodypadding: '30',
fieldLabel: 'Single Freight,Insurance & Other Charges For All Invoices',
labelWidth: 310,
defaultType: 'checkboxfield',
items: [
{
name: 'SingleFreight',
checked: true,
// inputValue: '5',
id: 'checkbox3'
}
]
},
otherStore],
html: "<hr style='position: relative; top: 14px; width:97.5%; margin-left:0.5%'></hr>",
}
},
{
// xtype: 'panel',
// flex: 1,
// height: 180,
// width: 610,
// bodypadding: '30',
items: {
xtype: 'fieldcontainer',
flex: 1,
height: 120,
width: 620,
bodypadding: '30',
items: [otherStore1]
}
}
]
},
You can expand the appropriate panel in the boxready listener function for the accordion. For example, to expand the second item:
listeners: {
boxready: function () {
this.items.getAt(1).expand();
}
}
See example fiddle here.
i try to use sencha cmd to create a project. But when using rowediting plugin, i got error
"SCRIPT5007: Unable to get property 'getAttribute' of undefined or
null reference"
whenever i scroll up/down over the editor on the grid.
Could you let me know what wrong here?
please click here to see more detail
Here my code look like:
Ext.define("Sample.view.common.HelloWorld",{
extend: "Ext.grid.Panel",
alias: 'widget.app-helloworld',
requires: [
'Ext.grid.plugin.RowEditing',
'PCS.config.Locale'
],
bind: '{hellostore}',
layout: {type: 'fit', align: 'stretch'},
initComponent: function() {
Ext.apply(this, {
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
pluginId: 'helloeditor',
errorsText: 'Warning',
listeners: {
cancelEdit: 'onCancelEdit',
validateedit: 'onValidateEdit',
edit: 'onEdit'
}
}],
columns: [
new Ext.grid.RowNumberer({
width: 30,
align: 'center'
}), {
header: this.lblSysNm,
dataIndex: 'sysCd',
width: 150,
align: 'center',
itemId: 'colSystem',
renderer: function(value, metaData){
return metaData.record.data.sysNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{systemCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblDept,
dataIndex: 'deptCd',
width: 180,
align: 'center',
itemId: 'colDept',
renderer: function(value, metaData){
return metaData.record.data.deptNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{deptCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblCountryCd,
dataIndex: 'cntyCd',
width: 120,
align: 'center',
itemId: 'colCountryCd',
editor: {
xtype: 'textfield',
maxLength : 2,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
fieldStyle: 'text-align: center;text-transform:uppercase',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblCountryNm,
dataIndex: 'cntyNm',
width: 170,
align: 'left',
itemId: 'colCountryNm',
editor: {
xtype: 'textfield',
maxLength : 50,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblReason,
dataIndex: 'reason',
width: 340,
align: 'left',
itemId: 'colReason',
editor: {
xtype: 'textfield',
maxLength : 200,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important'
}
}, {
header: this.lblLastUpd,
dataIndex: 'updUserId',
width: 100,
align: 'center',
itemId: 'colLastUpd',
editable: false
}, {
header: this.lblLastUpdDt,
dataIndex: 'updDt',
xtype: 'datecolumn',
format: 'Y-m-d H:i',
width: 150,
align: 'left',
itemId: 'colLastUpdDt',
editable: false
}
]
});
this.callParent();
}
});
How can i add grid in the center of the tab panel..My grid is not taking margins,style:{margintop:'10px'} even height: and width:
here is my grid:-
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
style:{marginLeft:'200px',marginTop:'30px'},
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 100,
// renderTo:Ext.getBody()
}]
}
Try nesting the grid into a container. Then from the container you can try out different sizes and layouts to place it exactly where you want. Here's one example.
I would remove the "style" padding/position, at least to start and see how you like within the container. Then pad/position from there. Try this:
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center',
},
items: [{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
height: 200,
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 500,
// renderTo:Ext.getBody()
}]
}]
}
Do not use CSS positioning (margins etc.) for that purpose. Use layout: center.
Here is an example: https://fiddle.sencha.com/#fiddle/s7h
How we can fixed the textbox width in extjs,Here i used the width property also but first time its displaying perfect but when we click on outside the textfield automatically width is changed. here is my code please provide any suggestion
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
//renderTo: Ext.getBody();
var container = Ext.create('Ext.container.Container', {
items: [{
contentPaddingProperty: '10 10 10 10',
renderTo: Ext.get('main'),
border: false,
html: '<img src="image/syneLogo.jpg" height="100" width="950"/>'
}]
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.get('main'),
name: 'myForm',
width: 950,
height: 800,
border: false,
frame: false,
// title:'Login',
bodyBorder: false,
fieldDefaults: {
labelWidth: 60
},
padding: '150 25 25 300',
items: [
{
align: 'center',
xtype: 'fieldset',
cls: 'my-fieldset-legend',
width: 400,
height: 250,
title: 'CAS Login',
collapsible: false,
items: [
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtuser',
fieldLabel: 'User ID',
name: 'enter user id',
emptyText: 'enter user id'
},
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtpass',
fieldLabel: 'Password',
name: 'pass',
emptyText: 'enter password',
inputType: 'password'
},
{
align: 'center',
cls: 'btn-margin',
border: false,
padding: '10 100 10 10',
buttons: [
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Submit',
width: 40,
handler: function()
{
var usr = this.up("form").getForm().findField("txtuser").getValue();
alert('Welcome--> ' + usr);
}
},
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Reset',
width: 40,
handler: function()
{
form.getForm().reset();
alert('Fields are cleared now');
}
}]
},
{
xtype: 'container',
height: 25
},
{
xtype: 'label',
padding: '150 5 5 100',
text: 'Please enter user id and password'
}
]
}
]
});
});
Use proper combination of layouts, probably you can try using 'fit' layout.
If the issue persist then try using minWidth config property of textfield.
I am trying to modify the sample code to build a similar form like
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/form-grid.html
My code is below:
var references = new Ext.form.FormPanel({
frame: true,
title: 'References',
bodyPadding: 5,
layout: 'column',
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: reference_store,
height: 400,
title:'General',
columns: [
{ id: 'name', header : 'Reference', flex: 1, sortable : true, dataIndex: 'reference' },
{ header: 'Impact', width : 75, sortable : true, dataIndex: 'impact'},
]
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{fieldLabel: 'Name', name: 'reference'}]
}]
});
But the entire FormPanel failed to show. When I replace the 'gridpanel' with 'fieldset' or other type, the FormPanel does appear regardless of the bad format.
xtype should be “grid“ instead of “gridpanel“