I need to create several views, with the same content, having only a grid that will be a little different from each others.
My idea is to create a base view, but I don´t know how change this grid in the inherited classes.
Base:
Ext.define('App.view.cadastro.FiltroBase',{
extend: 'App.controls.CoWindow',
alias: 'widget.filtrobase',
modal: false,
width: 800,
height: 400,
layout: 'vbox',
items: [
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
},
width: '100%',
defaults: {
padding: 4
},
items: [
{
xtype: 'label',
text: i18n.procurarPor
},
{
xtype: 'combobox',
itemId: 'comboBox',
queryMode: 'local',
forceSelection: true,
width: 150
},{
xtype: 'label',
text: 'Filtro:'
},
{
xtype: 'textfield',
itemId: 'filtro',
enableKeyEvents: true,
flex: 1
},
{
xtype: 'container',
width: 100,
layout: 'fit',
items: [
{
xtype: 'button',
text: i18n.pesquisar,
action: 'pesquisar',
itemId: 'botaoPesquisa',
icon: 'assets/img/16/find.png'
}
]
}
]
},
{
xtype: 'grid', ******************
flex: 1,
width: '100%',
itemId: 'grid',
columns: [
{
text: i18n.nome,
dataIndex: 'nome',
flex: 1
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true
}]*****************
}
],
buttons: [
{
text: i18n.incluir,
action: 'incluir',
itemId: 'botaoIncluir',
icon: 'assets/img/16/new.png'
},
{
text: i18n.editar,
action: 'editar',
itemId: 'botaoEditar',
icon: 'assets/img/16/edit.png'
}
]
});
The general idea is to do something like this:
Ext.define('BaseGrid', function(){
initComponent: function(){
this.columns = this.getColumns();
this.callParent();
},
getColumns: Ext.emptyFn
});
Ext.define('SubGrid', {
getColumns: function(){
return [];
}
});
Related
I am using ExtJs 3.4
I am having a big problem with button 'Finish workflow' - I would like to right align that button. Everything that I've tried so far didn't work. Is there any way to do this?
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
items: [
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}]
},
{
xtype: 'form',
border: false,
items: [
{
fieldLabel: 'Razlog',
xtype: 'appcombo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
},
}]
}
]
});
You can use toolbar with '->' to move the items to right:
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
layout: 'form',
items: [{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}, {
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}, {
fieldLabel: 'Razlog',
//xtype: 'appcombo',
xtype: 'combo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}, {
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}],
bbar: {
xtype: 'toolbar',
items: ['->', {
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
console.log('Button Click');
}
}]
}
}).show();
I'm working on a Sencha ExtJS 6.5 project. I have two gridpanels, one next to each other, and I need them to be scrollable, but no matter what I try, I can't seem to accomplish that.
I must add that this two gridpanels are inside another panel, which is also within a ViewPort.
This is a picture of what I need:
And this the code I have written so far:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
requires: [
'ScrollTest.view.MyViewportViewModel',
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.Panel',
'Ext.grid.column.Column',
'Ext.view.Table'
],
viewModel: {
type: 'myviewport'
},
layout: 'fit',
items: [
{
xtype: 'panel',
alignOnScroll: false,
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [
{
xtype: 'button',
text: 'Agregar Familia'
},
{
xtype: 'button',
text: 'Modificar Familia'
},
{
xtype: 'button',
text: 'Eliminar Familia'
},
{
xtype: 'button',
text: 'Detalle'
}
]
}
],
items: [
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: true,
title: 'Familias',
headerBorders: false,
bind: {
store: '{oStore}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blah blah'
}
],
viewConfig: {
scrollable: 'vertical'
}
},
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: 'vertical',
title: 'Articulos',
bind: {
store: '{oStore2}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blop blop'
}
]
}
]
}
]
}
]
});
What am I doing wrong? Thank you very much in advance.
You have an unnecessary layer of nesting, there is a panel with no layout defined. Remove it:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
layout: 'fit',
items: [{
xtype: 'panel',
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
layout: {
type: 'hbox',
align: 'stretch'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [{
xtype: 'button',
text: 'Agregar Familia'
}, {
xtype: 'button',
text: 'Modificar Familia'
}, {
xtype: 'button',
text: 'Eliminar Familia'
}, {
xtype: 'button',
text: 'Detalle'
}]
}],
items: [{
xtype: 'gridpanel',
flex: 1,
title: 'Familias',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blah blah'
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'Articulos',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blop blop'
}]
}]
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
new ScrollTest.view.MyViewport();
}
});
It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?
I need:
Label Text
Label
TextArea
Here is my code. I've tried everything, including a labelField but the text does not appear in my view.
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'Ext.form.Panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
padding: 5
},
items: [
{
xtype: 'label',
cls: 'block',
text: 'tesdfasrewaer'
},
{
fieldLabel: 'label',
labelWidth: 300,
xtype: 'textfield',
value: 'blahhhhh',
}, {
// xtype: 'panel' implied by default
xtype: 'textfield',
value: 'blahhhhhhhhhhh',
fieldLabel: 'text 2',
},{
xtype: 'textareafield',
width: 460,
height: 230,
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
}],
},
],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
So far I understood from your question that you need structure like below:
Label Text
Label
TextArea
Put below items in your view file:
items: [{
xtype: 'fieldset',
title: 'Enter your name and bio',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name'
}, {
xtype: 'textfield', // This textfield is dummy.
label: 'Bio', // You can simply put html here
labelWidth: '100%' // And can put your css to mimic default sencha label
}, {
xtype: 'textareafield',
name: 'bio'
}]
}]
Here is the fiddle for ref. Let me know if it serves your purpose or not.
I am trying to align a textfield to the right
From : _____________ To:____________
**Textbox here** **Textbox here**
I use column layout for from and to inputs, but I cannot get the textbox align to the right in each column.
Ext.define('AY.view.Temperature', {
requires: "Ext.form.field.ComboBox",
extend: 'Ext.form.Panel',
alias: 'widget.tempForm',
title: 'Temperature Convertor',
layout: 'column',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
bodyStyle : Ext.isIE
? 'padding:5px 5px 5px 5px;'
: 'padding:5px 5px 5px;',
// border: 'true',
items: [
{
xtype:'combo',
fieldLabel: 'From',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'tbspacer',
height: 10
},
{
xtype: 'panel',
layout: {
type:'hbox',
align: 'middle'
},
items:[
{
xtype: 'tbfill',
flex: 1
},
{
xtype: 'textfield',
hideLabel: true,
ctCls : 'spaces',
name: 'from',
flex: 2,
allowBlank: 'false'
}
]
}
]
},
{
xtype :'form',
items: [
{
xtype: 'combo',
fieldLabel: 'To',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'textfield',
name: 'to',
hideLable: true,
readOnly: 'true'
}
]
}]
/*buttons:[{
text: 'convert',
handler: function(){
// convertTemp()
}
}]*/
//console.log("Here it is "+tempTypes);
this.callParent(arguments);
}
How do I introduce empty space before the textfield?
Like so (see the fiddle):
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
title: 'Temperature Convertor',
autoShow: true,
items: [
{
xtype: 'combo',
fieldLabel: 'From',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'tbspacer',
height: 10
}, {
xtype: 'fieldcontainer',
anchor: '100%',
layout: {
type: 'hbox'
},
items: [{
xtype: 'container',
width: 105, // need to match the fieldLabel width
height: 10
}, {
xtype: 'textfield',
flex: 1,
ctCls: 'spaces',
name: 'from',
allowBlank: 'false'
}]
} // rest of the form...
],
renderTo: Ext.getBody()
});
Note: You must not nest forms in other forms! And renderTo: Ext.getBody() must not be used for nested items!
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});