i cant show an Ext JS component in a basic div. How much i know it supposed to happen through renderTo. But when i try to give the id of the div in the Ext JS, it doesnt happen.
Here is the link
https://jsfiddle.net/m10v973y/
<div id="bla"></div>
Ext.define('KitchenSink.view.form.FieldTypes', {
extend: 'Ext.form.Panel',
xtype: 'form-fieldtypes',
renderTo:"bla",
frame: true,
title: 'Form Fields',
width: 400,
bodyPadding: 10,
layout: 'form',
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'hiddenfield',
name: 'hidden1',
value: 'Hidden field value'
},{
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
}, {
xtype: 'displayfield',
name: 'displayfield1',
fieldLabel: 'Display field',
value: 'Display field <span style="color:green;">value</span>'
}, {
xtype: 'numberfield',
name: 'numberfield1',
fieldLabel: 'Number field',
value: 5,
minValue: 0,
maxValue: 50
}, {
xtype: 'checkboxfield',
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: 'box label'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
}, {
xtype: 'datefield',
name: 'date1',
fieldLabel: 'Date Field'
}, {
xtype: 'timefield',
name: 'time1',
fieldLabel: 'Time Field',
minValue: '1:30 AM',
maxValue: '9:15 PM'
}]
});
You defined a class but never created an instance. So you need to add
Ext.create('form-fieldtypes', {
renderTo: "bla"
});
Also change:
xtype: 'form-fieldtypes',
to
alias: 'form-fieldtypes',
Updated your fiddle
What worked for me was wrapping my containers in an:
Ext.onReady(function() {"your container goes here" });
Ext.onReady() method will be called once the Ext JS is ready to render the Ext JS elements.
Check here for details.
I also had to remove width and height values from my container. I was not able to render to div with these declared.
Related
I have two opened tabs like this:
On bottom there's an iframe (a Panel) but when i close one, the other tabs disappear:
And got this error:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
The view code:
Ext.define('tls.modulos.repservfact.view.Reporte', {
extend: 'Ext.panel.Panel',
iconCls: 'icon-report',
alias: 'widget.reporte',
closeAction: 'destroy',
name: 'tbReportes',
layout: {
type: 'border'
},
title: 'Resumen Servicios Facturados',
region: 'north',
flex: 1,
initComponent: function() {
var me = this;
var storeGenCar = Ext.create('tls.modulos.repservfact.store.Empresa');
storeGenCar.proxy.extraParams = {IdTipoEmpresa: 'GenCar'};
storeGenCar.load();
var storeTransp = Ext.create('tls.modulos.repservfact.store.Empresa');
storeTransp.proxy.extraParams = {IdTipoEmpresa: 'Transp'};
storeTransp.load();
var storeTipoCarga = Ext.create('tls.modulos.repservfact.store.TipoCarga');
storeTipoCarga.load();
Ext.applyIf(me, {
items: [
{
xtype: 'form',
region: 'center',
layout: 'column',
bodyPadding: 10,
defaults: {
width: 300,
padding: 2
},
items: [
{
xtype: 'datefield',
format: 'Y-m-d',
showToday: true,
fieldLabel: 'Fecha Inicial',
name: 'FechaInicial',
editable: false,
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
showToday: true,
fieldLabel: 'Fecha Final',
name: 'FechaFinal',
editable: false,
allowBlank: false
},
{
xtype: 'combo',
store: storeGenCar,
name: 'cmbGenCar',
fieldLabel: 'Generador de Carga',
displayField: 'RazonSocial',
valueField: 'IdEmpresa',
editable: false,
labelWidth: 130
},
{
xtype: 'combo',
store: storeTransp,
name: 'cmbTransp',
fieldLabel: 'Transportadora',
displayField: 'RazonSocial',
valueField: 'IdEmpresa',
editable: false
},
{
xtype: 'textfield',
name: 'txtPlaca',
fieldLabel: 'Placa'
},
{
xtype: 'combo',
store: storeTipoCarga,
name: 'cmbTipoCarga',
fieldLabel: 'Tipo de Carga',
displayField: 'ValorParametro',
valueField: 'IdValorParametro',
editable: false
},
{
xtype: 'textfield',
name: 'txtProducto',
fieldLabel: 'Producto'
}
],
buttons: [
{
xtype: 'button',
name: 'btnMostrar',
text: 'Ver Reporte',
formBind: true
},
{
xtype: 'button',
name: 'btnExcel',
text: 'Exportar a Excel',
formBind: true,
iconCls: 'icon-xls'
},
{
xtype: 'button',
name: 'btnPDF',
text: 'Exportar a PDF',
formBind: true,
iconCls: 'icon-pdf'
},
{
xtype: 'button',
name: 'btnBorrar',
formBind: true,
text: 'Borrar'
}
]
},
// This is the panel for iframe.
{
xtype: 'panel',
region: 'south',
height: '80%',
html: '',
name: 'ifReporte',
id: 'ifReporte'
}
]
});
me.callParent(arguments);
}
});
If I delete the panel for iframe, works perfectly. But i need it to show a report.
Some help?
Though i checked other posts about the same question, they didn't prove to be much helpful.
Below is the code where i am trying to get value of text box but i am repeatedly getting same error.
Is there any alternative method available.
initComponent: function() {
this.items = [
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
id : 'idname',
fieldLabel: 'Name',
allowBlank:false,
blankText:'Name is required'
},
{
xtype: 'textfield',
name : 'accno',
maxLength: 16,
enforceMaxLength : true,
regex: /^.{16}$/,
regexText:'Only 16 Digits please',
//autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'},
fieldLabel: 'AccNo'
},
{
xtype: 'textfield',
name : 'trade',
fieldLabel: 'Trade'
},
{
xtype: 'datefield',
name : 'doi',
fieldLabel: 'Date Of Insurance',
editable: false,
value : new Date()
},
{
xtype: 'datefield',
name : 'dd',
fieldLabel: 'Due Date',
editable:false,
value : new Date()
}
]
}
];
this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
handler: function (button) {
Ext.Msg.alert('You clicked the button');
var txt = Ext.getCmp('idname').value();
//var tf = button.up('window').down('#idname');
Ext.Msg.alert(txt);
},
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancel',
scope: this,
handler: this.close
}]
}];
this.callParent(arguments);
}
});
I would try the Ext.ComponentQuery.query method
on your button to check
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
scope:this,
handler: function (button) {
Ext.Msg.alert('You clicked the button');
var txtfield = this.query('#idname');
var txt = txfield.getValue();
Ext.Msg.alert(txt);
},
action: 'save'
}
My JSON file:
{
"options":{
"someString": "SomeText",
"someNumber": 42,
"someCombo": 2,
"someBool" : true
}
}
I made a JSON store for that JSON file, it loads correctly.
Now, my options tab:
items: [
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'Options Tab',
tabConfig: {
xtype: 'tab',
flex: 1
},
items: [
{
xtype: 'textfield',
id: 'someString',
fieldLabel: 'Some String:',
},
{
xtype: 'numberfield',
id: 'someNumber',
fieldLabel: 'Some Number',
},
{
xtype: 'combobox',
id: 'someCombo',
fieldLabel: 'Some Combo',
editable: false,
store: [['0','Option Zero'],['1','Option One'],['2','Option Two']]
},
{
xtype: 'checkboxfield',
id: 'someBool',
fieldLabel: 'Some Boolean',
boxLabel: 'Yes'
}
]
}
]
After quite some tries, I did not yet find a way to fill the form elements with JSON data:
onJsonstoreLoad: function(store, records, successful, eOpts) {
// this.child("#sepString").update(store.getAt(0).fields.getByKey("sepString"));
// Ext.fly("someString").update(store.getAt(0).fields.getByKey("someString"));
// Ext.fly("someString").setValue(store.getAt(0).fields.getByKey("someString"));
Ext.fly("someString").value=store.getAt(0).fields.getByKey("someString");
...
Ext.fly("someBool").checked=store.getAt(0).fields.getByKey("someBool");
}
So how do I get data into the form elements?
Use a FormPanel and its loadRecord method. You should give a look to Ext.form.Basic#setValues too.
var formPanel = Ext.widget({
xtype: 'form', // Use form xtype instead of panel
renderTo: Ext.getBody(),
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'Options Tab',
tabConfig: {
xtype: 'tab',
flex: 1
},
items: [{
xtype: 'textfield',
// We need names, not ids
name: 'someString',
fieldLabel: 'Some String:',
},{
xtype: 'numberfield',
name: 'someNumber',
fieldLabel: 'Some Number',
},{
xtype: 'combobox',
name: 'someCombo',
fieldLabel: 'Some Combo',
editable: false,
store: [['0','Option Zero'],['1','Option One'],['2','Option Two']]
},{
xtype: 'checkboxfield',
name: 'someBool',
fieldLabel: 'Some Boolean',
boxLabel: 'Yes'
}]
});
// Create a mock record
var MyRecord = Ext.define(null, {
extend: 'Ext.data.Model'
,fields: ['someString', 'someNumber', 'someCombo', 'someBool']
});
var record = new MyRecord({
"someString": "SomeText",
"someNumber": 42,
"someCombo": 2,
"someBool" : true
});
// You would use the record loaded in your store instead:
// var record = store.getAt(0);
// In recent version of Ext4, you can call formPanel.loadRecord directly
formPanel.getForm().loadRecord(record);
Here is my window and form inside of it:
Ext.define('App.view.Users.Update', {
extend: 'Ext.window.Window',
title: 'User',
width: 250,
id: 'UpdateWindowUsers',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormUsers'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonUsers'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonUsers'},
]
});
Ext.define('App.view.Users.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormUsers',
layout: 'form',
id: 'UpdateFormUsers',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'username',
name: 'username',
allowBlank: false,
},{
fieldLabel: 'password',
name: 'password',
minLength : 5,
allowBlank: false
},{
fieldLabel: 'Email',
name: 'email',
minLength : 5,
vtype: 'email',
allowBlank: false
},{
fieldLabel: 'first name',
name: 'first_name',
allowBlank: false
},{
fieldLabel: 'last name',
name: 'last_name',
allowBlank: false
}],
});
It's in one file: "App/view/Users/Update.js".
So, I'm creating an object with:
var win = Ext.create('App.view.Users.Update');
It's created with a button. But when I close the window with win.close() and when I close the "tab" inside my "border" layout and when I press the button for creating the same window again, it says (in my console) that I'm recreating an object with the same "id" again. It's already registered in Ext.AbstractManager.
How can I fully destroy the object? Maybe with Ext.AbstractManager.unregister(win); something?
If you need more code, no problem. :) Thank you.
P. S.
I'm getting a reference to my window with:
var window = Ext.ComponentQuery.query('#UpdateWindowUsers')[0];
window.close();
Does window.close() actually destroys the panel inside of it?
Solved it.
this == Controller
if(this.isCreated){
this.control(listeners);
}
I've put isCreated property inside Controller.
Say I have a form like this:
var Sum1 = new Ext.form.FormPanel({
id: 'Sum1',
items: [{
xtype: 'fieldset',
title: 'Step 1: Calculating The Sum',
items: [{
xtype: 'numberfield',
name: 'num1',
label: 'First Number'
},{
xtype: 'numberfield',
name: 'num2',
label: 'Second Number'
},{
xtype: 'numberfield',
name: 'num3',
label: 'Third Number'
},{
xtype: 'numberfield',
name: 'num4',
label: 'Fourth Number'
},{
xtype: 'button',
name: 'CalcSum',
ui: 'Confirm',
text: 'Calculate Sum',
handler: function() {
Ext.getCmp('Total').setValue('1');
}
}]
},{
xtype: 'fieldset',
title: 'Calculated Total',
items: [{
xtype: 'textfield',
name: 'Total',
id: 'Total',
placeHolder: 'Your Calculated Total'
}]
});
What I want to do is to use the values num1-4 in some method that sums them and returns a value - which is then set in my textfield Total.
I am very new to Sencha Touch, and am using Sencha Touch 2.0, so would love any assistance.
Thanks.
I would listen to the blur method. This method will be called after your textfield loose focus. Then you can do your thing and spit it out in the total field?
See API: http://docs.sencha.com/touch/2-0/#!/api/Ext.field.Text
Perhaps:
blur: function() {
// code here
}
or (I think better)
blur: yourFunctionHere()
UPDATE 2012-01-30:
You can define this in the same file, or even per field:
items: [{
xtype: 'numberfield',
name : 'num1',
label: 'First Number',
blur : function() {
console.log('You blurred me!');
// get current value of total field and sum it with me (if I am not null!)
}
},{
Better way is to defin one function, you can do it in the same file;
items: [{
xtype: 'numberfield',
name : 'num1',
label: 'First Number',
blur : doCalculateTotals()
},{