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);
Related
When I click a add button it needs to add a same container again. The below I have given my code segment
var rulepanel = Ext.apply(me, {
items: [{
xtype: 'uxform',
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
id: 'add',
text: 'Add',
handler: function(button, event) {
//rulepanel.insert(0, Ext.create(rulepanel.model));
// so here how can I add it
}
}],
}]
}]
});
So when click the add button what I need is I need to clone the "match,product/kpi and add button" fields. How can I achieve this task. I have tried with cloneconfig(). But couldn't achieve it. Thanks in advance.
In ExtJs, You create your own component as common and you can reuse whenever you required in application. You need to use Ext.define
Defines a class or override. A basic class is defined like this:
Ext.define('My.awesome.Class', {
someProperty: 'something',
someMethod: function() {
alert(s + this.someProperty);
}
...
});
var obj = new My.awesome.Class();
obj.someMethod('Say '); // alerts 'Say something'
In this FIDDLE, I have created a demo using your code as reference. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ProductKpi', {
extend: 'Ext.container.Container',
xtype: 'productkpi',
layout: {
type: 'hbox',
align: 'stretch'
},
margin:5,
items: [{
xtype: 'combobox',
flex:1,
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
margin:'0 5',
text: 'Add',
handler: function (button, event) {
button.up('#rule').add({
xtype: 'productkpi'
})
}
}],
});
Ext.create('Ext.form.Panel', {
title: 'Demo',
renderTo: Ext.getBody(),
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'productkpi'
}]
});
}
});
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.
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'
}
I'm trying to make a view with multiple formpanels (5) each with a fieldset inside however from what I've read, a view can only contain 1 formpanel, when i set 5 only the first one is shown.
Initially I was using a view with multiple fieldsets and got the look I wanted, however, this solution doesn't allow me to set store records to these fieldsets so i could manage multiple records in the same view so I had to try making these fieldsets have a parent formpanel and thus my problem started.
MyConfigView.js:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Panel',
alias: 'widget.configview',
config:{
layout: {
type: 'card',
animation:{
type: 'slide',
direction: 'left',
duration: 8000
}
},
items:[
{
docked: 'top',
xtype: 'toolbar',
ui: 'light',
title: 'Yadayada',
itemId: 'toolbarMyConfigView',
items: [{
xtype: 'button',
ui: 'back',
text: 'Voltar',
action: 'voltarConfigView',
itemId: 'toolbarMyConfigViewVoltarBt'
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
id: 'fieldSetAssalto',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetIncendio',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'yadada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yaaada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADADA',
itemId: 'fieldSetSequestro',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yadaaa'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yadada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetEmedico',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'YADAA'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
itemId: 'fieldSetAcidente',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
}
]
}
});
Any ideas on how can i get a view with multiple formpanels to work using Sencha Touch 2?
That is because your MyApp.view.MyConfigView view has a "card" layout applied, and this kind of layout allow you to display only a single sub view as active.
To display them all in the same view, I suggest you to set your view configuration as follows:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Container',
alias: 'widget.configview',
config:{
layout: {
type: 'vbox',
align: 'stretch'
}
defaults: {
flex: 1
},
items: [
...
]
}
});
In this way you will dispose the formpanels vertically in your view, giving them the same height.
PS: Remove the 'x-floating' class from them.
However, if you want to use a Card layout (which seems to be the best solution), I suggest you to give all your formpanels a different "itemId" config param.
xtype: 'formpanel',
itemId: 'assalto',
items: [
...
]
and then, using the ST MVC architecture, get these forms one by one, and calling the function.
.setRecord(<YOUR_RECORD>);
Read more on ST Controllers on Sencha's docs.
http://docs.sencha.com/touch/2-1/#!/guide/controllers