var win,
button = Ext.getCmp('show-btn');
button.on('click', function(){
win = Ext.define('MyApp.view.LeftRightWIndow', {
extend: 'Ext.window.Window',
height: 368,
width: 546,
title: 'My Window',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
height: 193,
width: 515,
layout: {
align: 'center',
type: 'hbox'
},
items: [
{
xtype: 'container',
flex: 1,
margins: '',
height: 135,
padding: '10 10 10 10',
width: 114,
layout: {
type: 'column'
},
items: [
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
},
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '',
height: 135,
padding: '10 10 10 10',
width: 114,
layout: {
type: 'column'
},
items: [
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
},
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
}
]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbtext',
autoRender: true,
cls: 'save',
height: 26,
padding: '5 5 5 5',
width: 43,
text: 'Save'
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbtext',
autoRender: true,
cls: 'edit',
height: 26,
padding: '5 5 5 5',
width: 43,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
});
how to show the Window when press the show-btn?
this code i m using Sencha Articheh to create. any idea?
With Ext.define() method you define class, but not creating instance of the class. For creating class instance you have to use Ext.create() method.
Also I recommend to move class definition outside click handler to separate file. If you are using standard application structure created by Sencha architect, create file with class definition in view folder.
So in click handler you will have just:
// create instance of MyApp.view.LeftRightWIndow class
win = Ext.create('MyApp.view.LeftRightWIndow');
// display window
win.show();
On the present moment click event just create window object without displaying it. For showing your window after clicking on 'show-btn', you need just to invoke show() method of window object. So try to place win.show() before last line, like this:
...
me.callParent(arguments);
}
});
win.show();
});
Related
In my Ext JS 6 app, I'm trying to create a flow layout with 3 containers, with the middle container having nested items that need to continue with the flow layout. I can get this working if I add the middle container's items directly, but I don't want to do that... I want them to be separate.
Here's an example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
title: 'Not properly working',
bodyPadding: 10,
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'container',
defaults: {
xtype: 'panel',
title: '1',
width: 50,
height: 50,
style: 'float: left;'
},
items: [{}, {}, {}, {}, {}, {}]
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
bodyPadding: 10,
title: 'This is how it should look',
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
}
});
So my flow layout should look like this (depicted in the example's 2nd panel):
start 1 1 1 (newline)
1 1 1 end
I got the idea from this thread, but that doesn't have a nested item like in my example. Also tried to use this thread's advice, but still no dice.
I think the issue is with the auto layout for the middle container, as it sets the width to 100% for its child div, but I'm not sure how to fix this... any advice?
I have the following application and it fills the screen no problem horizontally. I would like it to fill out vertically as well.
var missionsPanel = new Ext.panel.Panel
(
{
title: 'Active Missions', width: '35%', renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch', padding: 5}
}
);
resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'ISR Toolkit v3.0',
renderTo: Ext.getBody(),
layout: { type: 'hbox', align: 'fit', padding: 5 },
items:
[ missionsPanel, { xtype: 'splitter' },
{ title: 'Person Details', bodyPadding: 5, flex: 2,
items:
[
{ itemId: 'txtName', fieldLabel: 'Name:', xtype: 'textfield'},
{ itemId: 'txtAge', fieldLabel: 'Age', xtype: 'textfield'},
{ itemId: 'btnShow', xtype: 'button', height: '60', width: 125, align: 'right', text: 'Show Data', handler: createNewMissionWindow }
]
}
]
});
I am sure it's something small I a missing.
The easiest way would be to create a Viewport with a fit layout, and the only item being your panel (removing the renderTo configs, as well as any height/width).
I have a modal panel and includes several fields. Two fields of them bottom of the form. When user click a button, I would like to add one more field block just below the last fields. Therefore, I need to know window size and total components that used in the fieldset.
My question is, how can we count the components ( xtype's ) in a specified area? In my case, a fieldset ( when user click the LEVEL EKLE button ).
winArticle = new Ext.Window({
width: 600,
modal: true,
title: 'Artikel Seçimi',
closeAction: 'hide',
bodyPadding: 10,
items: new Ext.Panel({
items: [
{
xtype: 'fieldset',
title: 'Artikel Sorgulama',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
height: '76px',
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
items: [
{
xtype: 'combobox',
id: 'articleNo',
inputWidth: 320,
fieldLabel: 'ARTİKEL NO',
fieldStyle: 'height: 26px',
margin: '10 15 0 0',
triggerAction: 'query',
pageSize: true
},
{
xtype: 'button',
text: 'SORGULA',
width: 100,
scale: 'medium',
margin: '8 0 0 0'
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Artikel Bilgileri',
height: '140px',
layout: 'fit',
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
items: [
{
fieldLabel: 'ARTİKEL TANIMI',
name: 'artDesc',
flex: 3,
margins: '0 5 0 0'
},
{
fieldLabel: 'PAKET İÇERİĞİ',
name: 'artgebi',
flex: 1
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
items: [
{
fieldLabel: 'SUBSYS',
name: 'artSubsys',
flex: 1,
margins: '0 5 0 0'
},
{
fieldLabel: 'VARIANT',
name: 'artVariant',
flex: 1,
margins: '0 5 0 0'
},
{
fieldLabel: 'VARIANT TANIMI',
name: 'artVariantDesc',
flex: 2
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Aksiyon Seviyeleri',
id: 'article-fieldset',
items: [
{
xtype: 'button',
text: 'LEVEL EKLE',
scale: 'medium',
width: 100,
style: 'float: right',
margin: '0 7 0 0',
handler: function() {
var count = Ext.query('#article-fieldset');
console.log(count);
winArticle.setHeight(500);
Ext.getCmp('article-fieldset').add([
{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
items: [
{
flex: 2,
name: 'artLevel2',
allowBlank: false,
fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;',
margins: '0 5 0 0'
},
{
flex: 2,
name: 'artValue2',
allowBlank: false,
fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;'
}
]
}
]);
}
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
id: 'article-level-container',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
items: [
{
fieldLabel: 'LEVEL',
name: 'artLevel',
flex: 2,
margins: '0 5 0 0',
allowBlank: false,
fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;'
},
{
fieldLabel: 'VALUE',
name: 'artValue',
flex: 2,
allowBlank: false,
blankText: 'zorunlu alan, boş bırakılamaz',
fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;',
listeners: {
change: function(textfield, newValue, oldValue) {
if(oldValue == 'undefined' || newValue == '') {
Ext.getCmp('btnArticleSave').disable();
} else {
Ext.getCmp('btnArticleSave').enable();
}
}
}
}
]
}
]
}
]
}),
buttons: [
{
text: 'KAPAT',
scale: 'medium',
width: 100,
cls: 'btn-article-close',
listeners: {
click: function() {
winArticle.close();
}
}
},
'->',
{
text: 'EKLE',
scale: 'medium',
disabled: true,
width: 100,
margin: '0 9 0 0',
cls: 'btn-article-save',
id: 'btnArticleSave'
}
]
});
Why do you choose such complex way? Why don't you just use Window.add() and Window.insert() methods?
Using Window.add() method you can add component at runtime. This method will add your component/field at the end. If you want to insert at particular position use Window.insert() => Actually this method is AbstractContainer's insert method. Refer above links for more.
yes you can count fields in your fieldset.give fieldset a id or itemId and get object of that.
winArticle.down('fieldset[id=yourfieldsetid]').items.items.length
this code will give you total number of fields in your fieldset.
Hello I want to show and image that is like an alert sign when a change is done, then I have a footer panel like this one, with the sign:
Ext.define('footerPanel', {
extend: 'Ext.panel.Panel',
cls: 'fastec_background',
height: 24,
autoScroll: false,
border: false,
layout: {
type: 'border'
},
id: 'panel_footerFastec',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
margin: '5 5 0 20',
xtype: 'label',
region: 'center',
html: '<a>© 2012 FASTEC GmbH, Paderborn, Germany - </a><a target="_blank" href="http://www.easyoee.de">www.easyOEE.de</a> <a target="_blank" href="http://www.fastec.de">www.fastec.de</a>'
}, {
xtype: 'container',
region: 'east',
layout: 'table',
id: 'cont_footer_icons',
items: [{
xtype: 'image',
id: 'configchangedIcon',
height: 16,
margin: '5 0 5 0',
width: 16,
maxHeight: 20,
dock: 'right',
maxWidth: 20,
scale: 'large',
src: 'files/images/disk_blue.png',
hidden: true
}, {
xtype: 'image',
height: 16,
id: 'errorIcon',
margin: '5 0 5 0',
width: 16,
dock: 'right',
maxHeight: 20,
maxWidth: 20,
scale: 'large',
src: 'files/images/error16.gif',
hidden: true
}]
}]
});
me.callParent(arguments);
}
});
And the idea is that I have a general function which I could call anywhere and show or hide the icon, but unfortunately I call this function and nothing happens:
changeIconVisibility = function(str, value) {
try {
switch(str){
case 'configchangedIcon':
var img = Ext.getCmp('configchangedIcon');
if(value){
img.setVisible(true);
}else{
img.setVisible(false);
}
break;
}
} catch (e) {
Ext.msg.alert(e);
}
}
I tried by directly calling the component and setVisible(true) as well and nothing happens.
get the footerPanel component and use hide/ show method.
like
var myPanel = Ext.getCmp('your_panel');
myPanel.items.items[1].hide() //second item
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-hide
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-show
Using Ext.Panel and the table layout, I was able to create a layout just the way I want. However, how do I change this code so that I can define the widths and heights proportionally?
e.g. the table should not be 800 pixels but 100% of the screen width, and each box not 200 pixels but 25%.
here is the code:
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var table_wrapper2 = new Ext.Panel({
id: 'table_wrapper2',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:2},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 0 10px 10px 0'
},
items:[{
title:'Shopping Cart',
width: 400,
height: 290,
colspan: 2
},{
title:'Invoice Address',
width: 190,
height: 100
},{
title:'Delivery Address',
width: 200,
height: 100
}
]
})
var table_wrapper = new Ext.Panel({
id:'table_wrapper',
baseCls:'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:4},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
width: 810,
colspan: 4
},{
title:'Customer Information',
width: 400,
height: 400,
colspan: 2
},{
//title:'Shopping Cart',
frame: false,
border: false,
width: 400,
height: 400,
colspan: 2,
items: [ table_wrapper2 ]
}
]
});
replaceComponentContent(targetRegion, table_wrapper);
hideComponent(regionHelp);
</script>
Instead of :
layout:'table',
layoutConfig: {columns:2},
try this :
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%',
height: '100%'
}
}
},
Like I said in the reply to your other thread using vbox and hbox layouts might be a little easier for you if you want to do relative positioning. Also, if you want to stretch things to your window, put it in a Viewport, that automatically uses you entire window.
You might want to change the layout a bit (borders, frames), but with vbox and hbox layouts it would be something like this:
new Ext.Viewport({
layout: 'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
defaults: {
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title:'Customer Information',
flex: 1
},{
layout: 'vbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Shopping cart',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Invoice address',
flex: 1
},{
title: 'Delivery address',
flex: 1
}]
}]
}]
}
]
});
try this one fiddle example :
https://fiddle.sencha.com/#fiddle/2dm
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
height: 200, //Fixed height for this panel
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%' // To make the cell width 100%
}
}
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
//scrollable: true,
//autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
Consider using ColumnLayout instead. This gives you a choice between pixels and percentages for widths.