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
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've defined a panel class* which is wrapped by another panel**. Somehow subclass' items are not rendering? I've tried several layouts and configs, as well tried to set flex config but none of those adjustment worked. Why it could be?
Thanks in advance...
(*) Panel:
Ext.define('AP.view.dashboard.BPanel', {
extend: 'Ext.panel.Panel',
xtype: 'bpanel',
requires: [
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'Ext.ProgressBar'
],
layout : {type : 'vbox', align : 'stretch', pack: 'center'},
items: [
{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'component',
html: 'TEXT'
},
{
xtype: 'component',
html: '20.82%'
}
]
},
{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'progressbar',
flex: 1,
cls: 'left-top-text progressbar-no-text',
height: 7.5,
hideMode: 'display',
margin: '0 15 0 0',
maxHeight: 10,
minHeight: 3,
value: 0.7,
text: ''
},
{
xtype: 'panel',
layout: 'hbox',
items: [
{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'component',
html: '2016'
},
{
xtype: 'component',
html: '3750'
}
]
},
{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'component',
html: '2017'
},
{
xtype: 'component',
html: '4550'
}
]
},
{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'component',
html: 'Trend'
},
{
xtype: 'chartvisitors',
flex: 1,
cls: 'graph-analysis-right-inner-container right-value',
bind: {
store: '{visitors}'
}
}
]
}
]
}
]
}
]
});
(**) The panel above called by this one:
Ext.define('AP.view.dashboard.DashMid', {
extend: 'Ext.panel.Panel',
xtype: 'dashmid',
requires: [
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'HR.view.dashboard.APanel',
'HR.view.dashboard.BPanel',
'HR.view.dashboard.CPanel'
],
layout: {type: 'hbox'},
padding: 5,
items: [
{
xtype: 'apanel'
},
{
xtype: 'panel',
layout: {type: 'vbox'},
items: [
{
xtype: 'bpanel'
}
]
},
{
xtype: 'cpanel'
}
]
});
Well, I've found solution depends on some other stackoverflow questions and NAmorim's comment. Unfortunately because of on-going refactoring I won't repost code snippets, otherwise you could be more confuse.
The first mistake I've been done is about extended classes. I've crated nested panels. I had to extend several of them with Container class, instead of Panel class. So firstly refactored this step. Here is the Sencha documentation that explains which class to extend.
Secondly I've used vbox & hbox layouts but haven't stated any flex or width config. I've refactored those items through NAmorim's comment.
Thanks a lot.
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>{};
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);