PDA

View Full Version : Adding components to an Ext.window.Window



infernoz
9 May 2012, 12:56 PM
Hello,

I am attempting to create an Ext.window.Window that will pop up at a particular time in my application. The window has a fit layout and includes a panel. The panel will initially have one object in it which consists of a text field and a combobox.

If the user wants to add additional text field/combobox pieces to the window, they can do so by pressing a button.

I initially started out with one text field/combobox in the window and it looks great. The issue arises when a new field/combobox is added, the contents looks real funky and not aligned.

I currently am using an absolute layout for the panel because vbox produced similar issues. Absolute and vbox dont seem to work for me (no matter what I place for y: for absolute...) Why is the additional content not showing up in the layout that I would like (Each field/combobox object gets added in order vertically, not overlapping each other?

35046


35045

--Object representing my textfield, combobox

Ext.require(['DMT.view.OrgComboBox']);

Ext.define('DMT.view.IssueIdMultiSearchData' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.issueIdMultiSearchData',
layout: 'hbox',
maxHeight: 30,
maxWidth: 570,
items: [
{ xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
validateOnChange: true,
validateOnBlur: false,
allowBlank: false,
width: '250'
},
{ xtype: 'component', width: 25},
{ xtype: 'orgComboBox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
listeners: {
'afterrender': function() {
var comboStore = this.getStore();
this.setValue(comboStore.first().get('idNum'));
}
}
}
],

validate: function () {
var textField = this.getComponent('issueIdMultiSearchDataTextField');
var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');

if (textField.validate() && comboBox.validate()) {
return true;
}

return false;
}
});

-- My Window

Ext.require(['DMT.view.IssueIdMultiSearchData']);

Ext.define('DMT.view.IssueIdMultiSearchWindow' ,{
extend: 'Ext.window.Window',
title: 'Issue Id Search',
id: 'currentSearchWindow',
height: 600,
width: 570,
layout: 'fit',
buttonAlign: 'right',
draggable: false,
resizable: false,
modal: true,

constructor: function(config) {
maxArrayLength = 15;
currentWindow = this;
issueIdSearchDataArray = config.searchDataArray;
issueIdLocalArray = new Array();

this.callParent(arguments);

issueIdMultiSearchWindowPanel = this.getComponent('issueIdMultiSearchWindowPanel');

for (var i = 0; i < issueIdSearchDataArray.length; i++) {
var issueIdSearchData = issueIdSearchDataArray[i];
issueIdMultiSearchWindowPanel.add(issueIdSearchData);
issueIdLocalArray.push(issueIdSearchData);
}

if (issueIdSearchDataArray.length < maxArrayLength) {
var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData',{
x:0, y:10
});

issueIdMultiSearchWindowPanel.add(newIssueIdSearchData);
issueIdLocalArray.push(newIssueIdSearchData);
}

},

items: [
{xtype: 'panel', id: 'issueIdMultiSearchWindowPanel', layout: 'absolute'}

],

buttons: [
{ text: 'Add Search Criteria', id: 'addSearchCriteriaButton',
listeners: {
'click': function() {
var currentWindow = Ext.getCmp('currentSearchWindow');
if (currentWindow.isSearchDataValid() && issueIdLocalArray.length < maxArrayLength) {
var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData',{
x:0, y:50
});

issueIdMultiSearchWindowPanel.add(newIssueIdSearchData);
issueIdLocalArray.push(newIssueIdSearchData);
}
else {
Ext.Msg.show({
title:'DMT Search',
msg: 'Cannot add additional search item. Current items are invalid and/or maximum number of items are in place to be search',
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
}
}
}
},
{ text: 'OK' }
],

isSearchDataValid: function() {
for (var i = 0; i < issueIdLocalArray.length; i++) {
var currentIssudeIdSearchData = issueIdLocalArray[i];

if (!currentIssudeIdSearchData.validate()) {
return false;
}
}

return true;
}

});

--Calling the window to pop up. Pops up when someone clicks on a textfield in a form

{
............
xtype : 'textareafield',
name : 'Multi Id Search',
fieldLabel: 'Multi Id Search',
readOnly: true,
autoScroll: true,
height: 50,
listeners: {
'focus': function() {
someWindow = Ext.create('DMT.view.IssueIdMultiSearchWindow', {
searchDataArray: multiIdSearchArray
});
someWindow.show();
}
},
x:0, y:50
}
..............


Thanks,

infernoz

slemmon
9 May 2012, 2:12 PM
Does this example help at all?



Ext.define('CoupleOfFields', {
extend: 'Ext.form.FieldContainer'
, alias: 'widget.fieldct'

, layout: 'hbox'
, items: [{
xtype: 'textfield'
, fieldLabel: 'Field 1'
}, {
xtype: 'textfield'
, fieldLabel: 'Field 2'
}]
});


Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 600,
layout: 'fit',
items: [{
xtype: 'form'
, items: [{
xtype: 'fieldct'
}]
}]
, bbar: [{
xtype: 'button'
, text: 'Add More Fields'
, handler: function (btn) {
btn.up('window').down('form').add({ xtype: 'fieldct' });
}
}]
}).show();

infernoz
10 May 2012, 7:12 AM
Hello,

I tried implementing features from your example using a fieldcontainer instead of a panel. But the same issue persists. The initial add of the first field container works fine, but additional adds fall on top of each other and make the contents look bad and unreachable to edit by the user

35068

Heres the new code that still isnt working

Ext.require(['DMT.view.OrgComboBox']);

Ext.define('DMT.view.IssueIdMultiSearchData' ,{
extend: 'Ext.form.FieldContainer',
alias : 'widget.issueIdMultiSearchData',
layout: 'hbox',
/* maxHeight: 30,
maxWidth: 570,*/
items: [
{ xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
validateOnChange: true,
validateOnBlur: false,
allowBlank: false,
width: '250'
},
{ xtype: 'component', width: 25},
{ xtype: 'orgComboBox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
listeners: {
'afterrender': function() {
var comboStore = this.getStore();
this.setValue(comboStore.first().get('idNum'));
}
}
}
],

validate: function () {
var textField = this.getComponent('issueIdMultiSearchDataTextField');
var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');

if (textField.validate() && comboBox.validate()) {
return true;
}

return false;
}
});


Ext.require(['DMT.view.IssueIdMultiSearchData']);

Ext.define('DMT.view.IssueIdMultiSearchWindow' ,{
extend: 'Ext.window.Window',
title: 'Issue Id Search',
id: 'currentSearchWindow',
height: 600,
width: 570,
layout: 'fit',
buttonAlign: 'right',
draggable: false,
resizable: false,
modal: true,

constructor: function(config) {
maxArrayLength = 15;
currentWindow = this;
issueIdSearchDataArray = config.searchDataArray;
issueIdLocalArray = new Array();
this.callParent(arguments);

issueIdMultiSearchWindowForm = this.getComponent('issueIdMultiSearchWindowForm');

for (var i = 0; i < issueIdSearchDataArray.length; i++) {
var issueIdSearchData = issueIdSearchDataArray[i];
issueIdMultiSearchWindowForm.add(issueIdSearchData);
issueIdLocalArray.push(issueIdSearchData);
}

if (issueIdSearchDataArray.length < maxArrayLength) {
var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData');
issueIdMultiSearchWindowForm.add(newIssueIdSearchData);
issueIdLocalArray.push(newIssueIdSearchData);
}
},

items: [
{xtype: 'form', id: 'issueIdMultiSearchWindowForm'}
],

buttons: [
{ text: 'Add Search Criteria', id: 'addSearchCriteriaButton',
listeners: {
'click': function() {
var currentWindow = Ext.getCmp('currentSearchWindow');
if (currentWindow.isSearchDataValid() && issueIdLocalArray.length < maxArrayLength) {
var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData');
issueIdMultiSearchWindowForm.add(newIssueIdSearchData);
issueIdLocalArray.push(newIssueIdSearchData);
}
else {
Ext.Msg.show({
title:'DMT Search',
msg: 'Cannot add additional search item. Current items are invalid and/or maximum number of items are in place to be search',
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
}
}
}
},
{ text: 'OK' }
],

isSearchDataValid: function() {
for (var i = 0; i < issueIdLocalArray.length; i++) {
var currentIssudeIdSearchData = issueIdLocalArray[i];

if (!currentIssudeIdSearchData.validate()) {
return false;
}
}

return true;
}

});



Code to instantiate the Window has stayed the same.

Just an update I tried adding a vbox or fit layout to the form I added in the items section in my window, but an add of another fieldcontainer makes all fieldcontainers to dissappear in the window...

Cheers,

infernoz

infernoz
10 May 2012, 9:26 AM
Seems the issue is related specifically to adding my created xtype issueIdMultiSearchData. If I add two of these guys or more to the form, I get the issue described above. If I add another object, such as a text field, the layout looks fine. Still cant figure out why I cant instantiate more than one issueIdMultiSearchData though....

vietits
10 May 2012, 5:00 PM
It seems that your problem is at using id for components (see code marked with red color in your code). This way, all the added components will have the same id and this will cause problem. Try to remove these ids and use other way instead.


Ext.define('DMT.view.IssueIdMultiSearchData' ,{
extend: 'Ext.form.FieldContainer',
alias : 'widget.issueIdMultiSearchData',
layout: 'hbox',
/* maxHeight: 30,
maxWidth: 570,*/
items: [
{ xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
validateOnChange: true,
validateOnBlur: false,
allowBlank: false,
width: '250'
},
{ xtype: 'component', width: 25},
{ xtype: 'combobox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
listeners: {
'afterrender': function() {
var comboStore = this.getStore();
this.setValue(comboStore.first().get('idNum'));
}
}
}
],
validate: function () {
var textField = this.getComponent('issueIdMultiSearchDataTextField');
var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');

if (textField.validate() && comboBox.validate()) {
return true;
}

return false;
}
});

infernoz
14 May 2012, 9:44 AM
Thanks vietits, removing the ids solved the problem I was having. I replaced my getComponentCall('id') with up('xtype') and down('xtype') calls.

One additional question though.... lets say you have two or more of the same xtypes inside a component (5 text fields for instance). Say you only want to access one them and want a very specific one. How would you get that very specific text field using down()? You could assign the different text fields different ids, but that messes up the display of them.... what to do?

Thanks,

infernoz

vietits
14 May 2012, 11:49 PM
You can use xtype in association with a specific property, such as 'name' or event a custom property. Example:


<parentComponent>.down('xtype[property="value"]');

infernoz
15 May 2012, 1:17 PM
Can the property be dynamically specified in a variable like so:

var someVariable = 5

<parentComponent>.down('xtype[property=someVariable]');

?

Since I will be placing many instances of the same class in my panel, and will need to retrieve them based on user actions the property would have to be passed in.

How can one retrieve ALL components underneath another component that have a particular xtype? The function down() only returns the first instance, what if you want all?

Thanks,

infernoz

vietits
15 May 2012, 11:45 PM
Can the property be dynamically specified in a variable like so:

var someVariable = 5

<parentComponent>.down('xtype[property=someVariable]');

Since I will be placing many instances of the same class in my panel, and will need to retrieve them based on user actions the property would have to be passed in.

You can query a child of a parent by using


var someVariable = 5;
<parentComponent>.down('xtype[property=' + someVariable + ']');



How can one retrieve ALL components underneath another component that have a particular xtype? The function down() only returns the first instance, what if you want all?

You can use <parentComponent>.query('xtype') to get all descentdant components of xtype.