In another question here on Stack Overflow (this one) I have seen this piece of code:
Ext.define("App.view.leaders.MyViewName", {
extend: 'App.view.basePopup',
xtype: 'MyViewName',
config: <Ext.form.IPanel>{
scrollable: 'vertical',
items: [
{
xtype: 'fieldset',
title: 'Add New Auto Asset',
instructions: '<hr class="separate" />',
items: [
<Ext.field.ISelect>{
xtype: 'selectfield',
label: 'Borrower Position',
store: 'BorrowerPositionSelectorStore',
},
<Ext.field.ISelect>{
xtype: 'selectfield',
label: 'Asset Type',
store: 'AssetTypeSelectorStore',
},
{
xtype: 'textfield',
name: '',
label: 'Description'
},
{
xtype: 'numberfield',
name: '',
label: 'Value'
}
]
}
]
}
});
What is the purpose of the <Ext.form.IPanel>, <Ext.form.ISelect> tags before the components definitions? Can you point me to any documentation on that?
It's a TypeScript construct for generics, see: http://www.typescriptlang.org/Handbook
To indicate the type of the object literal, they use:
var square = <Square>{};
Related
I would like to have a "welcome text" before the directory tree in my Ext.tree.Panel, so something like that:
I wrote this code, but it doesn't work:
Ext.define('MyProject.view.permissions.Example', {
extend: 'Ext.tree.Panel',
requires: [
'MyProject.view.permissions.ExampleController'
],
controller: 'example',
xtype: 'exampleWindow',
store: 'examplePermissionTree',
rootVisible: false,
rowLines: false,
//headerPosition: 'left',
lines: false,
autoLoad: false,
autoExpand: false,
items :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
columns: {
items: [ {
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1
}, {
xtype: 'booleancolumn',
flex: 0.3,
dataIndex: 'granted',
trueText: Strings.permissionGranted,
falseText: Strings.permissionNotGranted
}, {
xtype: 'widgetcolumn',
flex: 0.2,
widget: {
xtype: 'button',
handler: 'onGroupClick',
text: Strings.permissionGrant
}
}
]
}
});
My problem is that the text doesn't appear. It appears only the directory tree.
How Could I fix it? Should I use another approach?
1. Use Tools instead of items
Using tools instead of items can solve the problem. An array of Ext.panel.Tool configs/instances to be added to the header tool area. The code should be like
tools :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
2. Use label in lieu of displayfield
tools :[{
xtype: 'label',
fieldLabel: 'welcome text',
name: 'welcome',
}],
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 defined a view that should be able to be called in two modes. There are only two differences depending on a flag:
title of view (config.title)
selectfield might be shown or hidden
Here is the simplified view:
Ext.define('MyApp.view.fancyView', {
xtype: 'fancyview',
extend: 'Ext.form.Panel',
config: {
cls: 'fancyviewclass',
title: "titleDependingOnFlag",
items: [
{
xtype: 'fieldset',
name: 'fieldsetFancy',
items: [
{
xtype: 'selectfield',
itemId: 'stateID',
usePicker: true,
label: 'state',
store: 'States',
name: 'StateID',
valueField: 'ID',
displayField: 'ID'
},
{
xtype: 'selectfield',
itemId: 'countryID',
usePicker: true,
label: 'country',
store: 'Countries',
name: 'CountryID',
valueField: 'ID',
displayField: 'ID',
//hidden: true
}
]
}
]
}
});
And of course there is a controller that creates this view. At the moment I'm passing the flag as config value, see
Ext.define('MyApp.controller.fancyController', {
...
raisedBasedOnTap:function (flag){
this.myFancyFlag = !!flag;
var myFancyView = Ext.create('FLSMOBILE.minimax.view.CallReportTimestampPlaceCar', {
myFancyFlag: me.myFancyFlag
});
app.pushView(myFancyView);
}
...
});
What would be the best approach to make the title depending on a flag (like title: fancyFlag? 'title1' : 'title2') and hide selectfield countryID based on the flag?
Thanks in advance!
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);
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