Iam Using compositfield for Combobox and edit button as side by side
for this my code is
{
xtype: 'fieldset',
title: 'Covered under warranty',
checkboxToggle: true,
labelAlign: 'right',
autoHeight: true,
width: 730,
items: [{
bodyStyle: 'padding-left:5px;',
layout: 'table',
autoHeight: true,
autoWidth: true,
layoutConfig: {
columns: 2
},
defaults: {
frame: true,
style: 'margin: 0 0 1px 3px'
},
items: [{
xtype: 'fieldset',
title: 'Warranty Manufacturer',
autoHeight: true,
width: 360,
labelWidth: 110,
items: [{
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company',
items: [ComboComanyinWarranty, btnEdit]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company Location',
width: 220,
items: [ComboCompanyLocationInWarranty]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Person',
width: 220,
items: [ComboContactPersonInWarranty, {
xtype: 'button',
text: '...'
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Phone',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Mobile',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Email',
items: [{
xtype: 'displayfield',
value: ''
}]
}]
}
}
but buttons are not displaying properly bottom part of the button cut.
so please help
Thanks in advance
Maybe autoheight isn't working? Try setting it to a fixed height...
Related
I am using ExtJs 3.4
I am having a big problem with button 'Finish workflow' - I would like to right align that button. Everything that I've tried so far didn't work. Is there any way to do this?
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
items: [
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}]
},
{
xtype: 'form',
border: false,
items: [
{
fieldLabel: 'Razlog',
xtype: 'appcombo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
},
}]
}
]
});
You can use toolbar with '->' to move the items to right:
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
layout: 'form',
items: [{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}, {
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}, {
fieldLabel: 'Razlog',
//xtype: 'appcombo',
xtype: 'combo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}, {
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}],
bbar: {
xtype: 'toolbar',
items: ['->', {
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
console.log('Button Click');
}
}]
}
}).show();
In my extjs6 project, in the current page I have a column layout. Inside column 2 I have a chart. How can I make the chart fill that column in height and width? Everything I try is not working.
Below is my view, column 1 has small components so no need to expand contents. I've tried 'fit' height '100%', nothing seems to work properly. also, I am populating the chart AFTER the view is created. not sure if that matters
Ext.define('xxx.view.historical.Historical', {
extend: 'Ext.Panel',
xtype: 'app-historical',
controller: 'historicalController',
itemId: 'historicalItemId',
viewModel: 'historicalVM',
requires: [
'xxx.view.historical.HistoricalController',
'xxx.util.GlobalVar',
'Ext.chart.*'
],
title: 'Historical',
layout: 'fit',
items: [{
xtype: 'tabpanel',
margin: 10,
tabBar: {
layout: {
pack: 'left'
},
border: true
},
style: {
'border-radius': '4px 4px 4px 4px',
'box-shadow': '0 0 5px rgba(0, 0, 0, 0.3)'
},
defaults: {
iconAlign: 'top',
bodyPadding: 0
},
items: [{
title: 'Profit By Instrument',
autoScroll: true,
layout: {
type: 'column'
},
width: '100%',
items: [{
columnWidth: 0.20,
items: [{
xtype: 'combobox',
fieldLabel: 'Account',
emptyText: 'Select Account',
editable: false,
margin: 5,
displayField: 'AcctNum',
valueField: 'AcctNum',
bind: {
store: '{myAccountSummaryStore}'
},
listeners: {
select: 'onComboboxSelect'
},
queryMode: "local"
//combobox to select account
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Instruments',
defaultType: 'checkboxfield',
itemId: 'itemIdCheckboxContainer',
margin: 5,
//cls: 'my-class',
items: [{
boxLabel: 'Anchovies',
name: 'topping',
inputValue: '1',
id: 'checkbox1',
cls: 'ownClass'
}]
}, {
xtype: 'button',
text: 'Select All'
}, {
xtype: 'button',
text: 'Deselect All'
}]
}, {
//COLUMN 2
columnWidth: 0.80,
items: [{
xtype: 'chart',
title: 'this is my title',
itemId: 'chartId',
margin: 5,
width: '100%',
height: '100%',
legend: {
docked: 'bottom'
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['cumulativePl'],
title: 'Pl'
}, {
type: 'time',
position: 'bottom',
fields: ['filedate'],
title: 'Filedate',
//renderer: 'onAxisLabelRender',
label: {
rotate: {
degrees: -40
}
}
}]
}]
}]
}, {
title: 'Profit By Account',
autoScroll: true,
items: []
}]
}]
});
Just set the column layout to fit, it should work:
columnWidth: 0.40,
layout: {
type: 'fit'
},
Check out this FIDDLE
I have two vbox that I want right next to each other. However, only the first one is showing up. Why is this and how do I change it? Here is my code
layout: 'fit',
title: 'Avail Requests Details',
minWidth: 1000,
minHeight: 600,
width: 1174,
height: 600,
autoShow: true,
//listeners: {
// beforedestroy: 'onBeforeDestroy'
//},
items: [{
xtype: 'form',
reference: 'viewForm',
bodyPadding: 10,
defaults: {
xtype: 'container',
height: 25,
layout: {
type: 'column'
},
defaults: {
columnWidth: 0.3,
labelWidth: 140
}
},
layout: {
type: 'vbox',
},
items: [{
xtype: 'displayfield',
fieldLabel: 'CHANNEL',
name: 'Channel'
},
{
xtype: 'displayfield',
fieldLabel: 'ADVERTISER',
name: 'AdvertiserName'
},
{
xtype: 'displayfield',
fieldLabel: 'DEMO',
name: 'Demo'
},
{
xtype: 'displayfield',
fieldLabel: 'COMMENTS',
name: 'comments'
}],
layout: {
type: 'vbox',
},
items: [{
xtype: 'displayfield',
fieldLabel: 'CHANNEL',
name: 'Channel'
},
{
xtype: 'displayfield',
fieldLabel: 'ADVERTISER',
name: 'AdvertiserName'
},
{
xtype: 'displayfield',
fieldLabel: 'DEMO',
name: 'Demo'
},
{
xtype: 'displayfield',
fieldLabel: 'COMMENTS',
name: 'comments'
}]
}]
});
You have two items definition in your form, so second just overrite first, not adding new one. Also you have to use hbox layour for parent component.
I updated your code, check this fiddle.
I need to create several views, with the same content, having only a grid that will be a little different from each others.
My idea is to create a base view, but I don´t know how change this grid in the inherited classes.
Base:
Ext.define('App.view.cadastro.FiltroBase',{
extend: 'App.controls.CoWindow',
alias: 'widget.filtrobase',
modal: false,
width: 800,
height: 400,
layout: 'vbox',
items: [
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
},
width: '100%',
defaults: {
padding: 4
},
items: [
{
xtype: 'label',
text: i18n.procurarPor
},
{
xtype: 'combobox',
itemId: 'comboBox',
queryMode: 'local',
forceSelection: true,
width: 150
},{
xtype: 'label',
text: 'Filtro:'
},
{
xtype: 'textfield',
itemId: 'filtro',
enableKeyEvents: true,
flex: 1
},
{
xtype: 'container',
width: 100,
layout: 'fit',
items: [
{
xtype: 'button',
text: i18n.pesquisar,
action: 'pesquisar',
itemId: 'botaoPesquisa',
icon: 'assets/img/16/find.png'
}
]
}
]
},
{
xtype: 'grid', ******************
flex: 1,
width: '100%',
itemId: 'grid',
columns: [
{
text: i18n.nome,
dataIndex: 'nome',
flex: 1
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true
}]*****************
}
],
buttons: [
{
text: i18n.incluir,
action: 'incluir',
itemId: 'botaoIncluir',
icon: 'assets/img/16/new.png'
},
{
text: i18n.editar,
action: 'editar',
itemId: 'botaoEditar',
icon: 'assets/img/16/edit.png'
}
]
});
The general idea is to do something like this:
Ext.define('BaseGrid', function(){
initComponent: function(){
this.columns = this.getColumns();
this.callParent();
},
getColumns: Ext.emptyFn
});
Ext.define('SubGrid', {
getColumns: function(){
return [];
}
});
ExtJS 4.1.1a
Simple authorization form (login & passowrd).
Even browser not prompt to save entered login and password values unlike standard html form with input's.
Sample code: http://jsfiddle.net/AllanStark/mKMfh/1/
Ext.create('Ext.window.Window', {
title: 'Test',
height: 430,
width: 335,
bodyPadding: '20 0 0 0',
draggable: false,
resizable: false,
closable: false,
layout: {
type: 'vbox',
align: 'center'
},
bodyStyle: {
background: '#FFFFFF'
},
items: [{
xtype: 'image',
width: 150,
height: 150,
src: 'images/logo.gif'
},{
xtype: 'form',
url: 'login.php',
standardSubmit: true,
border: 0,
width: 170,
padding: '20 0 20 0',
defaultType: 'textfield',
layout: 'vbox',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'qtip',
width: '100%'
},
items: [{
xtype:'textfield',
fieldLabel: 'Login',
name: 'login',
allowBlank: false
},{
xtype:'textfield',
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
allowBlank: false,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = field.up('form').getForm();
form.submit();
}
}
}
}],
buttons: [{
text: 'Ok',
formBind: true,
disabled: true,
handler: function() {
var form = this.up('form').getForm();
form.submit();
}
},{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}]
}]
}).show();
To open the password dialog the html-attribut autocomplete must be "on". In Extjs its "off" and there's no method to change it only a 'workaround'.
So add this event to the listeners of password and username:
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
Ext.create('Ext.window.Window', {
title: 'Test',
height: 430,
width: 335,
bodyPadding: '20 0 0 0',
draggable: false,
resizable: false,
closable: false,
layout: {
type: 'vbox',
align: 'center'
},
bodyStyle: {
background: '#FFFFFF'
},
items: [{
xtype: 'image',
width: 150,
height: 150,
src: 'images/logo.gif'
},{
xtype: 'form',
url: 'login.php',
standardSubmit: true,
border: 0,
width: 170,
padding: '20 0 20 0',
defaultType: 'textfield',
layout: 'vbox',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'qtip',
width: '100%'
},
items: [{
xtype:'textfield',
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
listeners: {
// ------
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
// ------
}
},{
xtype:'textfield',
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
allowBlank: false,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = field.up('form').getForm();
form.submit();
}
},
// ------
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
// ------
}
}],
buttons: [{
text: 'Ok',
formBind: true,
disabled: true,
handler: function() {
var form = this.up('form').getForm();
form.submit();
}
},{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}]
}]
}).show();