I have hbox and 2 toolbars inside... I need align first to left and second to right even if first is hidden
{
layout: 'hbox',
items: [
{
xtype : 'toolbar',
itemId: 'searchToolbar',
items : [
...
]
},
{
xtype: 'toolbar',
items: [
...
]
}
]
},
Try this..this is pretty much as per your requirement according to my understanding.
Ext.define('My.test.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border',
'Ext.layout.container.HBox',
'Ext.toolbar.Toolbar',
'Ext.toolbar.TextItem',
'Ext.toolbar.Fill'
],
autoScroll: true,
items:[
{
layout: 'hbox',
items: [
{
xtype : 'toolbar',
itemId: 'searchToolbar',
items : [
{
xtype: 'tbtext',
text: 'Item1'
}
]
},
{
xtype: 'tbfill'
}
,{
xtype: 'toolbar',
items: [
{
xtype: 'tbtext',
text: 'Item2'
}
]
}
]
}
]
});
Ext.create('My.test.Viewport');
Is there any restrictions that prevents you from using CSS? If not can you not add itemCls to the config with one class for floating left and one for right?
items: [{
xtype: 'toolbar',
itemCls: 'toolbar-dock-left',
...
}, {
xtype: 'toolbar',
itemCls: 'toolbar-dock-right',
...
}
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'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.
I want to have a dynamic tree panel in my project. I use from sencha docs example For this component.
But, I have a error when run my project:
Ext.data.schema.Schema.lookupEntity(): No such Entity "Category".
MyProject/Model/Category.js:
Ext.define('MyProject.model.Category',{
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
}]
});
MyProject/classic/src/view/category/Cateogry.js:
Ext.define('MyProject.view.category.Category', function(){
var store = Ext.create('Ext.data.TreeStore', {
model: 'Category',
root: {
name: 'Product'
}
});
var items = [{
items:[{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'treepanel',
reference: 'treepanel',
height: 200,
width: 400,
frame: true,
store: store,
rootVisible: false
},{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onClick'
}
}]
}];
return{
extend: 'Ext.panel.Panel',
requires: [
'Ext.form.Panel',
'Ext.rtl.*'
],
controller: 'categorycontroller',
alias: 'widget.category',
layout: 'vbox',
items: items
};
});
You have to add your model as required:
...
requires: [
'Ext.form.Panel',
'Ext.rtl.*',
'ProjectName.model.Category'
],
...
I am trying to make two lists in a same view, I am separating the view in two flex boxes and inside of this includes each list but it is not working properly.. any clue of this implementation or suggestion? I am working with Sencha Touch 2.3.1 framework.
Thanks in advance.
/**
* The home view
*/
Ext.define('xx.view.home.BlocksHome', {
extend : 'Ext.Container',
xtype : 'blocksHome',
requires: [
'Ext.TitleBar',
'Ext.dataview.List',
'xx.view.news.News'
],
config : {
items: [
// selection container
{
xtype : 'container',
cls : 'home-container',
flex : 2,
layout : {
type : 'hbox',
align: 'stretch'
},
defaults: {
xtype : 'container',
styleHtmlContent: true,
flex : 1
},
items : [
// Data Collection
{
cls : 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [
{
cls : 'news-collection-header',
layout: 'hbox',
items: [
{
html: '<h4>' + xx.Text.getText('NEWS') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text : xx.Text.getText('NEWS'),
flex: 1
},
{
xtype: 'news',
layout: 'card'
}
]
}
]
},
// Customers
{
cls : 'open-activities',
layout: 'vbox',
items: [
{
cls : 'open-activities-header',
layout: 'hbox',
items : [
{
html: '<h4>' + xx.getText('ACTIVITY_LIST_TITLE') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text : xx.Text.getText('ACTIVITY_LIST_TITLE'),
flex: 1
}
]
}
]
}
]
}
]
}
});
And here the view include in a card layout named "news"
Ext.define('xx.view.news.List', {
extend: 'Ext.dataview.List',
xtype: 'news',
requires: [
'Ext.TitleBar',
'Ext.plugin.PullRefresh'
],
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
listeners: {
painted: function(element) {
if (Ext.browser.is.IE) {
// position pull to refresh centered
Ext.get(element.query('.x-list-pullrefresh')[0]).setStyle('left', (Ext.getBody().getWidth() / 2) - 132 + 'px');
}
}
}
}
],
store: 'News',
itemTpl: '<div class="newslistline">' +
' <div class="newssubject"><tpl if="unread == \'true\'"><span style class="newsNew">new</span></tpl>{subject}</div>' +
' <div class="newsupdatedate">{[xx.Helper.formatSAPdate2Str(values.updatedate)]}</div>' +
' <div class="newsupdateby">{responsible}</div>' +
' <div class="newsattachment {[values.attflag == \'true\'? \'attachment\' : \' \']}">' +
' </div>' +
' </div>',
emptyText: xx.Text.getText('NEWS_LIST_EMPTY'),
loadingText: xx.Text.getText('NEWS_LIST_LOADING'),
items: [
{
docked: 'top',
xtype: 'titlebar',
title: xx.Text.getText('NEWS_LIST_TITLE')
}
]
}
});
Add flex:1 to each list. Here is a working example I created using Sencha Fiddle.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('News', {
extend: 'Ext.data.Model',
config: {
fields: ['subject']
}
});
var store1 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Item1'
}, {
subject: 'Item2'
}]
});
var store2 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Record1'
}, {
subject: 'Record2'
}]
});
Ext.define('xx.view.news.List', {
extend: 'Ext.List',
xtype: 'news',
requires: ['Ext.TitleBar'],
emptyText: 'Empty',
loadingText: 'Loading',
config: {
itemTpl: '<div class="newslistline">{subject}</div>'
}
});
Ext.create("Ext.Container", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xtype: 'container',
cls: 'home-container',
flex: 2,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
styleHtmlContent: true,
flex: 1
},
items: [{
cls: 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [{
cls: 'news-collection-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2
}, {
xtype: 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store1
}]
}, {
cls: 'open-activities',
layout: 'vbox',
items: [{
cls: 'open-activities-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2,
itemTpl: '<div class="newslistline">{subject}</div>'
}, {
xtype: 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store2
}]
}]
}]
});
}
});
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