Develop Reference

Button on FormPanel not showing

Here is my code, i need the button is down of the filefield, but the butto doesnt appear in nowhere, whats the problem?
Ext.define('Academico.view.etpPersonalizada.Edit', {
extend: 'Sharedev.form.Panel',
alias: 'widget.academico-etpPersonalizadaEdit',
store: 'Academico.store.EtpPersonalizadas',
model: 'Academico.model.EtpPersonalizada',
cls: 'sharedev-overflow--visible',
layout: {
type: 'vbox',
align: 'center',
},
initComponent: function () {
this.items = [
{
xtype: 'panel',
cls: 'sharedev-card',
bodyPadding: 15,
items: [
{
xtype: 'container',
name: 'Período desta Etapa',
layout: {
type: 'hbox',
},
items: [
{
xtype: 'datefield',
name: 'pssEtpDtInicio',
fieldLabel: 'Início',
readOnly: true,
disabled: true
},
{
xtype: 'datefield',
name: 'pssEtpDtFim',
fieldLabel: 'Fim',
readOnly: true,
disabled: true
}
]
},
{
xtype: 'panel',
cls: 'sharedev-card',
layout: {
type: 'auto',
},
width: 600,
name: 'Período desta Etapa',
items: [
{
xtype: 'displayfield',
value: 'Observação do Coordenador',
cls: 'sharedev-card-title sharedev-bold',
},
{
xtype: 'displayfield',
margin: '15 0 15 15',
style: 'opacity:0.5',
name: 'etpPrtObsCoord',
cls: 'sharedev-card-subtitle sharedev-bold',
},
]
},
{
xtype: 'panel',
name: 'panel2',
items: [
{
xtype: 'textareafield',
name: 'etpPrtObsAcad',
padding: '0 8 0 0',
width: 600,
fieldLabel: 'Observação'
},
{
xtype: 'filefield',
name: 'arqArquivo',
fieldLabel: 'Arquivo',
emptyText: 'Selecione um arquivo',
maxLength: 100,
minLength: 10,
buttonConfig: {
width: 103,
text: 'Procurar...',
iconCls: 'icon-search'
}
},
{
Try to put here, nothing is show.
xype: 'button',
name: 'btnArquivo',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
height: 60,
}
]
}
],
Same thing here.
bbar: {
xype: 'button',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
}
}
]
this.callParent(arguments);
}
});
The problem is the buttons doesn't appear, no matter where i put them. I'm using extJS 4.2.

You have a typo,
xype: 'button'
It should be
xtype: 'button'

How do i increase the width of textfield in extjs

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.

Align Center - EXTJS 4

var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
height: 155,
width: 350,
layout: {
type: 'hbox',
},
items: [{
xtype: 'image',
src : 'images/system-users.png',
width: 100,
},{
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
//align: 'stretch',
padding:'0 0 20 0'
},
items: [{
xtype: 'textfield',
width: 250,
id: 'username',
fieldLabel: 'Username'
},{
xtype: 'textfield',
width: 250,
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
},{
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
},btnLogin],
}
]//contain items
});
Question
this is an live demo http://jsfiddle.net/anthor/WM9DD/88/
1)how to align center the login button?
2)the image and all textbox align center and middle of the window box.

Try this:
var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'image',
src: 'images/system-users.png',
width: 100,
}, {
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
align: 'stretch',
padding: '0 0 20 0'
},
flex: 1,
items: [{
xtype: 'textfield',
id: 'username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
}, {
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
}, {
xtype: 'container',
layout: {
type: 'hbox',
pack: 'end'
},
items: [btnLogin]
}],
}] //contain items
});
In the hbox layout you can add the align: 'stretch' option and the flex: 1 option to the items to stretch them. I also put the button in another container to stick it to the right.

Error: Miss a drag as we are waiting for WebCore's response for touch down

I am trying to add scrolling to a Sencha Touch field set. While I am trying to scroll down the field set, it is showing the below error in logcat:
W/webview(1003): Miss a drag as we are waiting for WebCore's response for touch down.
For field set, i wrote the below code:
{
xtype: 'fieldset',
docked: 'top',
margin: '20000',
width: 600,
height: 200,
items: [
{
xtype: 'textfield',
id: 'consumername',
style: 'font: DroidSans',
label: 'ConsumerName',
labelWidth: '30%'
},
{
xtype: 'numberfield',
id: 'Mobilenum',
style: 'font: DroidSans',
label: 'Mobile',
labelWidth: '30%'
},
{
xtype: 'emailfield',
id: 'email',
label: 'CustomerEmailid',
labelWidth: '30%',
placeHolder: 'email#example.com'
},
{
xtype: 'textareafield',
id: 'adressfield',
style: 'font: DroidSans',
label: 'Address',
labelWidth: '30%'
},
{
xtype: 'textfield',
id: 'areafield',
style: 'font: DroidSans',
label: 'Area/Location',
labelWidth: '30%'
},
{
xtype: 'selectfield',
label: 'City',
labelWidth: '30%',
options: [
{
text: 'Bangalore',
value: 'first'
},
{
text: 'Delhi',
value: 'second'
},
{
text: 'Mumbai',
value: 'third'
}
]
},
{
xtype: 'numberfield',
id: 'pinfield',
style: 'font: DroidSans',
label: 'Pincode*',
labelWidth: '30%'
},
]
}
I am testing in Android Olive Pad tablet with 2.2 version. I am using Sencha Touch 2 and PhoneGap to build the app.

How to open a window after a button click in extjs

I am working with extjs designer 2. It works ok and i designed a viewport. It creates some view files. The first one is myviewport.js:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
items: [{
xtype: 'panel',
title: 'SIM usage'
}, {
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
}, {
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
}, {
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
}, {
xtype: 'actioncolumn',
items: [{
handler: function (view, rowIndex, colIndex, item, e) {
alert(view);
},
altText: 'Run report',
iconCls: 'runReport'
}]
}],
viewConfig: {
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}]
}, {
xtype: 'panel',
title: 'Pyshical SIM cards'
}, {
xtype: 'panel',
title: 'Virtual SIM cards'
}, {
xtype: 'form',
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Config',
items: [{
xtype: 'numberfield',
id: 'IP1',
width: 220,
fieldLabel: 'Server IP',
labelWidth: 150
}, {
xtype: 'numberfield',
id: 'IP2',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 240,
y: 10
}, {
xtype: 'numberfield',
id: 'IP3',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 330,
y: 10
}, {
xtype: 'numberfield',
id: 'IP4',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 420,
y: 10
}, {
xtype: 'textfield',
id: 'username',
fieldLabel: 'username',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 40
}, {
xtype: 'textfield',
id: 'password',
inputType: 'password',
fieldLabel: 'password',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 70
}, {
xtype: 'textareafield',
id: 'emails',
fieldLabel: 'Alert emails',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 100
}, {
xtype: 'textfield',
id: 'smtp',
fieldLabel: 'SMTP',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 170
}, {
xtype: 'textfield',
id: 'smtpCredentials',
fieldLabel: 'SMTP Server credentials',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 200
}, {
xtype: 'button',
height: 30,
width: 90,
text: 'Restore',
x: 170,
y: 230
}, {
xtype: 'button',
height: 30,
width: 90,
text: 'Save config',
x: 270,
y: 230
}]
}]
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, options) {}
});
with the
onButtonClick: function(button, e, options) { }
I want to open a window. But I don't know how to do this. I already have made a window and this is stored in the mywindow.js file:
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 334,
width: 540,
layout: {
type: 'border'
},
title: 'Run report',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
});
Now what do i put in the onbuttonclick event?

Adding
Ext.create('MyApp.view.MyWindow').show();
To your button handler should do the trick.