I have the following form defined:
Ext.define('Admin.view.messaging.MsgDataForm',{
extend: 'Ext.window.Window',
xtype: 'msgdataform',
title: 'Compose Practice Message',
defaultFocus: '[name=subject]',
modal: true,
layout: 'fit',
closable: false,
width: 700,
items: [{
xtype: 'form',
layout: 'anchor',
fieldDefaults: {labelWidth: 60,labelAlign: 'right',anchor: '100%'},
padding: 10,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Date',
items: [{
xtype: 'datefield',
name: 'msgdate',
format: 'F j, Y g:i A',
readOnly: true,
flex: 1,
margin: '0 5 0 0'
},{
xtype: 'combo',
name: 'priority',
fieldLabel: 'Priority',
store: Ext.create('Ext.data.Store',{
fields: ['priorityval','priority'],
data: [{'priorityval':0,'priority':'Low'},{'priorityval':1,'priority':'Normal'},{'priorityval':2,'priority':'High'}]
}),
queryMode: 'local',
displayField: 'priority',
valueField: 'priorityval',
width: 160
}]
},{
xtype: 'textfield',
name: 'subject',
fieldLabel: 'Subject'
},{
xtype: 'textarea',
id: 'editor1',
name: 'message',
style: {background: '#E1E1E1'}
}]
}],
buttons:[{
text: 'Send',
handler: 'onClick_btnMsgDataSend'
},{
text: 'Cancel',
handler: 'onClick_btnMsdDataCancel'
}]
});
The height of the textarea is not properly sized when the window is rendered. Additionally, when the window is resized, only the width of the textarea is resized - not the height. Attempting to listen to the resize event on the text area after the window is resized but it isn't fired. Any ideas? Thanks.
You width is properly resized because of the default configuration of 'anchor:100%'.
On the other hand, the height it's a little bit more difficult, the idea that comes to me now is try to with a particular css (using property cls) manipulate the height (height:'100%') or something like that. Because you can't use flex in a textarea, you could also nest de textarea in a panel and use flex on it to try it.
Check the documentation of textarea of ExtJS5 for other posible solutions:
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.form.field.TextArea
Related
The development of the mobile terminal landing interface, the runtime found that the text input box display abnormal. If you put the code in toolbar to show no problem, the house ah formPanel shows weird, the effect is as follows
enter image description here
mycode:
Ext.define('GasApp.view.main.login.Login',{
extend : 'Ext.form.Panel',
xtype : 'loginView',
requires: [
'Ext.field.Password',
'Ext.Button',
'Ext.field.Toggle',
'Ext.layout.HBox',
'Ext.Toast',
'GasApp.view.main.login.Controller'
],
alternateClassName: 'loginView',
controller : 'loginCtrl',
listeners: {
initialize: 'onLoginInitialize'
},
config:{
padding: '40 30 0 30',
items: [{
xtype: 'textfield',
name: 'account',
ui : 'text_',
label: '账号',
clearIcon:true,
required: true
},{
xtype: 'passwordfield',
name: 'password',
label: '密码',
required: true
},{
items: [{
xtype: 'togglefield',
name: 'persist',
label: '记住我',
labelTextAlign: 'right',
labelAlign: 'left',
value: true
}]
},{
xtype: 'button',
width: '100%',
text: '登 陆',
ui: 'action',
listeners: {
tap: 'onLoginClick'
}
}]
}
});
I am using Extjs 4.1.1
I have panel on which I have added toolbar at bottom side.
This toolbar has 3 items, I want to aling first item in first row, and rest two items in next row, i.e. one below others.
as shown in the image, I want to align the items as shown above to the Red Rectangle.
My code is as given below.
Please suggest How can I do that?
my code is like this
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height:60,
items: [
{
xtype: 'tbtext',
id:'costId',
text : "Total Cost <br> $66,000",
height : 40
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'saveButton',
text: 'Add to BOM',
handler: function() {
saveProduct();
}
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'cancelButton',
text: 'Cancel',
handler: function() {
cancel();
}
}
]
}],
One possible solution would be adding two bottom toolbars to the panel. Just like this:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [{
text: 'Add to BoM',
cls: 'add-to-bom-button'
}, {
text: 'Cancel',
cls: 'cancel-button'
}]
}, {
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [costContainer]
}]
where costContainer is
var costContainer = Ext.create('Ext.container.Container', {
border: false,
layout: 'vbox',
items: [{
xtype: 'label',
html: 'Total Cost',
cls: 'total-cost-label'
}, {
xtype: 'label',
html: '$ 66,000',
cls: 'price-label'
}]
});
I think this example looks like what you are looking for, just have to fix the css.
http://jsfiddle.net/alexrom7/LHK39/3/
So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.
Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});
I have added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 469,
width: 729,
title: 'My Panel 1',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
height: 238,
title: 'My Panel 2',
items: [{
xtype: 'gridpanel',
height: 179,
title: 'My Grid Panel 1',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
}, {
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}],
viewConfig: {
}
}]
}]
});
me.callParent(arguments);
}
});
I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :)
Also do not set fixed width and height if you want them to be managed automatically.
Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/
i have designed an entry form as shown,
i need to have same space between test box and Middle name label.
My code is as follows,
var patientForm = new Ext.FormPanel({
layout: 'column',
columnWidth:1.5,
renderTo: "patientCreation",
frame: true,
autoScroll:true,
title: 'Create Patient',
bodyStyle: 'padding:9px',
width: 900,
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
},{
xtype: 'textfield',
fieldLabel: 'LastName',
name: 'lastName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
allowBlank:false
},
....
....
]
How to leave/increase space between text box and Middle name column?
If you know your number of columns, use column layout. Otherwise do this:
defaults: {
labelStyle: 'padding-left:10px;'
},
items: [...]
Add a defaults config to the container of the columns. All it's children will have the settings you define in defaults (docs). In this example there's just the margin setting (docs) in defaults that will be applied to each item/column.
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - with default margins',
width: 350,
height: 250,
layout:'column',
defaults: {
margin: '0 15 0 0' //top right bottom left (clockwise) margins of each item/column
},
items: [{
title: 'Column 1',
columnWidth: 0.25
},{
title: 'Column 2',
columnWidth: 0.55
},{
title: 'Column 3',
columnWidth: 0.20
}],
renderTo: Ext.getBody()
});
The accepted solution works only with fields as columns. My solution works with any type of column.
PS: the column layout documentation is here.