putting an ExtJS component inside of a div - javascript

i m trying to put an ExtJS form into a div. But when i do that all the view is getting messed up. Any idea how can i fit ExtJS components inside of divs ?
var configurationsContent=$('<div class="tab-pane" id="tab3">'+"Page 3" +'</div>').appendTo(tabContent);
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Support Ticket Request',
width: 650,
height: 500,
renderTo: Ext.getBody(),
style: 'margin: 50px',
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'FirstName',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'LastName',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}]
}]
});
formPanel.appendTo(configurationsContent);

Replace
renderTo: Ext.getBody()
with
renderTo: 'theIdOfYourDiv'
and remove
formPanel.appendTo(configurationsContent);
(because there is no appendTo method on Ext.form.Panel).

Related

How to remove disabled attribute in Ext JS

I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?
As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})

vbox layout is not working in border layout

I have a requirment where i need to put one item inside vbox layout. my item is having a border layout and west and center reason having some vbox layout componet. below I am putting the code of item. In this main panel is border layout and reason having vbox but this is not working.
my Code :
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
layout : 'fit',
split: true,// enable resizing
margin: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 100,
layout: 'vbox',
height: 200,
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 100
},{
title: 'ss Region is resizable2',
xtype: 'panel',
height: 100
}],
collapsible: true, // make collapsible
id: 'west-region-container',
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
width : 300,
layout: 'vbox',
margin: '5 5 0 0',
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 50,
},
{
title: 'ss Region is resizable',
xtype: 'panel',
height: 10
}]
}],
renderTo: Ext.getBody()
});
Below is my Actual code where I am using vboxLayout and then border layout is one of the item of this. I am getting Layout run failed error
Ext.define('myApp.myData.myApp', {
extend: 'Ext.container.Container',
alias: 'widget.myApp',
controller: 'myAppController',
items: [{
xtype: 'label',
margin: '5 10 0 0',
height: 28
},
{
xtype: 'panel',
itemId: 'mainPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
margin: '3 10 2 5'
},
items: [
{
xtype: 'myPanel'
},{
xtype : 'panel',
height: 500,
width : 300,
layout: 'border',
items :[{
xtype : 'panel',
layout: {
type: 'vbox',
align: "stretch"
},
items :[{
xtype: 'myPanel1'
},{
xtype : 'myPanel2'
}]
},{
xtype : 'panel',
layout: {
type: "vbox",
align: "stretch"
},
items :[{
xtype: 'myGrid'
}]
}]
}
]
}]
});
Any help will appriciate.
Change your layout to:
layout: {
type: "vbox",
align: "stretch"
}
And put flex on child items:
flex: 1

How to reduce space between label and text box in extjs?

I want to reduce space between label and text box, you can see in bellow image,
I used Ext.form.field.Text control of ext JS. Please see bellow code for this control.
this.temp1min = new Ext.form.field.Text({
xtype: 'textfield',
/* *///labelAlign: 'left',
//labelWidth: 60,
//width: '7%',
//labelStyle: 'padding: 10px 10px;',
//padding:'0 '
fieldLabel: 'T1 Min',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
//allowBlank: false,
name: 'temp1min'
});
this.temp1max = new Ext.form.field.Text({
xtype: 'textfield',
//labelAlign: 'left',
//labelWidth: 30,
//width: '6%',
fieldLabel: 'T1 Max',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
// allowBlank: false,
name: 'temp1max'
});
And UI, Please see below image.
You can use labelWidth:'auto';
The labelWidth of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right".
Here I have created an sencha fiddle demo. Hope this will help you to solve your problem.
Ext.create('Ext.form.Panel', {
title: 'Label width example',
width: '100%',
bodyPadding: 10,
renderTo: Ext.getBody(),
defaults: {
xtype: 'textfield',
labelWidth: 'auto',
margin: '0 5',
allowBlank: false // requires a non-empty value
},
layout: 'hbox',
items: [{
fieldLabel: 'T1 Min',
name: 'temp1min'
},{
fieldLabel: 'T1 Max',
name: 'temp1min'
}, {
name: 'name',
fieldLabel: 'Name',
}, {
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});
Labelwidth: 'auto'
does not work in extjs 6.0.x, it only accepts numbers.
edit: Found the answer.
To adjust the space between the label and the textfield, in extjs 6.0.x, you have to use the following code.
labelStyle: 'width: 30px'

Sencha Ext Panel Fill Browser

I have the following application and it fills the screen no problem horizontally. I would like it to fill out vertically as well.
var missionsPanel = new Ext.panel.Panel
(
{
title: 'Active Missions', width: '35%', renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch', padding: 5}
}
);
resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'ISR Toolkit v3.0',
renderTo: Ext.getBody(),
layout: { type: 'hbox', align: 'fit', padding: 5 },
items:
[ missionsPanel, { xtype: 'splitter' },
{ title: 'Person Details', bodyPadding: 5, flex: 2,
items:
[
{ itemId: 'txtName', fieldLabel: 'Name:', xtype: 'textfield'},
{ itemId: 'txtAge', fieldLabel: 'Age', xtype: 'textfield'},
{ itemId: 'btnShow', xtype: 'button', height: '60', width: 125, align: 'right', text: 'Show Data', handler: createNewMissionWindow }
]
}
]
});
I am sure it's something small I a missing.
The easiest way would be to create a Viewport with a fit layout, and the only item being your panel (removing the renderTo configs, as well as any height/width).

Reset does not work a form in Sencha Touch

All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);
Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();
Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();

Categories