var confirmWindow = Ext.create('Ext.window.Window', {
title: 'Selected Item List',
autoHeight: true,
width: 500,
layout: 'fit',
modal: true,
items: [{
xtype: 'panel',
bodyPadding : 5,
items: [{
xtype: 'textfield',
id : 'freightFee',
fieldLabel: 'Freight Fee ',
name : 'freight' // I need this value, when I click the button
}]
}],
bbar: ['->', {
xtype: 'buttongroup',
items: [{
text: "test",
handler: function () {
// I want to get the textfield value (freightFee)
var freightFee = Ext.getCmp('freightFee').getValue(); // error :Ext.getCmp('freightFee') is undefined
}
}]
}
});
I have a window like above, and I want to get the text inputbox value when I click the button.
I tried,
var freightFee = Ext.getCmp('freightFee').getValue();
but error message say,
Ext.getCmp('freightFee') is undefined
anybody know this?
thank you!
Don't use getCmp ever! It's very expensive and unnecessary. Check out up/down methods to locate elements parents/childrens http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-down
In your case something like that should work:
handler: function(button) {
var tf = button.up('window').down('#freightFee');
}
Related
I am using an EXTJS xtype: container to create a row and when I want to insert a row into the store the row gets added to the top of the existing row instead of the bottom, is there any way to add the newly created row to the bottom?
Below is the code:
somefunc: function (token, filter, op) {
var filter = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
]
});
this.insert(0, filter);
this.doLayout();
return filter;
}
Any idea why this could be happening and how to fix this?
Any idea why this could be happening and how to fix this?
Because you are using insert() method instead of this you can use add() method it will by default add in last index.
In this FIDDLE, I have created a demo using add() method to adding new component. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Add new row',
renderTo: Ext.getBody(),
tbar: [{
text: 'Add new',
handler: function (btn) {
var panel = btn.up('panel');
panel.add({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'textfield',
emptyText:'enter value here',
fieldLabel:'this is field '+( panel.items.items.length+1)
}]
});
}
}]
})
}
});
First of all, I have about 1000-1500 records and I need to show them in a grid in custom style. But, first row has to contain checkbox and a form(combo,textfield), which is below that checkbox.
Similar to:
row1: checkbox
combo, textfield, textfield
row2: checkbox
combo, textfield, textfield
...
So, I could not use grid for this approach(Because I have to use 'colum render function' to each row and it causes re-render whole grid again even if change one row).
That's why I tried to add each component to a panel dynamically. But the main problem is that whenever I add the components to the panel, it takes too long . For example, it takes 4.5 s for only 100 records. I can't even imagine how long would it take for 1500 records.
Please check this fiddle. You will understand the exact problem. please do not forget the check console.time:
https://fiddle.sencha.com/#fiddle/13g0
And sample codes:
console.time('FakeGrid');
Ext.suspendLayouts();
var fakeGrid = Ext.create('Ext.panel.Panel', {
title: 'Fake grid Panel',
renderTo: Ext.getBody(),
});
var records = [];
for(var i=0; i < 10; i++) {
records.push({
id: 'Check'+ i,
reg: 'Reg' + i
})
}
Ext.each(records, function(rec) {
var regionPanel = {
xtype: 'fieldset',
collapsible: true,
border: false,
title: rec.reg,
layout: 'vbox',
items: []
};
Ext.each(records, function(rec) {
var hBoxPanel = {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'checkbox',
boxLabel: rec.id
}]
};
var fakeSubPanel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
items: [{
xtype: 'combobox',
fieldLabel: 'Combo'
}, {
xtype: 'textfield',
fieldLabel: 'field1'
}, {
xtype: 'textfield',
fieldLabel: 'field2'
}]
});
var sitePanel = {
xtype: 'panel',
layout: 'vbox',
//margin: '5 0 0 31',
items: [hBoxPanel, fakeSubPanel]
};
regionPanel.items.push(sitePanel);
}); //Ext.each
fakeGrid.add(regionPanel);
}); //Ext.each
Ext.resumeLayouts(true);
console.timeEnd('FakeGrid');
If you have any suggestion, please enlight me with your ideas. Thank you so much!
I have my ExtJS 4.2.1 MVC Application.
Inside my app, I have a grid with a toolbar. The toolbar has 2 buttons, "Add New" and "Edit Record".
Inside my Controller.js I listen for my toolbar buttons click events.
this.control({
'toolbar #newRecord': {
click: this.addRecord
},
'toolbar #editRecord': {
click: this.editRecord
},
'[xtype=editshiftcode] button[action=commit]': {
click: this.saveRecord // here I have to add or edit
}
}
Then I have Window that I want to use for editing and adding records:
Ext.define('App.view.EditShiftCode', {
extend: 'Ext.window.Window',
alias: 'widget.editshiftcode',
height: 250,
width: 550,
title: 'Add / Edit Shift',
modal: true,
resizable: false,
layout: 'fit',
glyph: Glyphs.PENCIL,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
//height: 175,
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: { // defaults are applied to items, not the container
allowBlank: false,
allowOnlyWhitespace: false,
msgTarget: 'side',
xtype: 'textfield'
},
items: [
{
xtype: 'textfield',
name: 'ShiftCode',
fieldLabel: 'Code'
},
{
xtype: 'textfield',
name: 'Description',
fieldLabel: 'Description'
},
{
xtype: 'hiddenfield',
name: 'ShiftType'
},
{
xtype: 'hiddenfield',
name: 'ShiftTypeId'
},
{
xtype: 'textfield',
name: 'Hours',
fieldLabel: 'Hours per Day'
},
{
xtype: 'colorcombo',
name: 'ColorHex',
fieldLabel: 'Color'
},
{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'IsActive',
}
],
}]
}],
buttons: [
{
text: 'OK',
action: 'commit',
glyph: Glyphs.SAVE
},
{
text: 'Cancel',
action: 'reject',
glyph: Glyphs.CANCEL
}]
});
me.callParent(arguments);
},
});
My editRecord function is:
editRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My addRecord function is:
addRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My saveRecord function is:
saveRecord: function (button, e, options) {
// here i need to know what operation im going to perform.
// if Im going to edit then I have to update my form record to my store record
// if im going to add then I need to add a new item to my store.
}
Is this correct? To use the same function to perform 2 different actions? And if so, how can I know what action am I going to perform and how to do it?
Thanks
This way always worked for me:
User selects a record in the grid
User clicks "Edit record"
I use loadRecord to load the selected record in the form
When he clicks OK I call updateRecord
If user clicks "Add record" I create a new blank record and go to step 3
If he clicks OK after adding record, I just add the new record to the grid - you can easily know if the record is new or existing by checking phantom flag. So if record.phantom === true then it is new.
I have a panel which is not a form, yet it's used like a form. I need to disable the "addButton" button when a text field is invalid. The disabling in the text Field's validator function works, but visually the button still looks enabled.
How can I tell a button to be visually disabled via the validator method on my text field?
Here is the code:
items: [
{
xtype: 'textfield',
validator: function(value) {
var reg = /^\d+(,\d+)*$/;
var addButton = this.ownerCt.down('[itemId=addButton]');
if (reg.test(value)===false) {
addButton.disabled=true;
addButton.allowDepress=false;
return "Enter whole numbers separated by comma";
}
addButton.disabled=false;
addButton.allowDepress=false;
return true;
},
Here is working sample http://jsfiddle.net/H76fQ/2/
var button = Ext.create('Ext.button.Button',{
renderTo: Ext.getBody(),
text: 'Ok',
disabled: true
});
Ext.create('Ext.form.field.Text',{
allowBlank: false,
renderTo: Ext.getBody(),
listeners:{
afterrender: function(){
this.validate();
},
validitychange: function(me, isValid){
button.setDisabled(!isValid);
}
}
});
To disable the FormPanel’s submit button,You can set the FormPanel’s monitorValid to true and the submit button’s formBind to true.
items: [{
xtype: 'ux.form',
monitorValid: true, // Must be added
layout: {
type: 'hbox',
align: 'start',
pack: 'stretch'
},
items: [{
name:"testing",
xtype:'textfield',
fieldLabel:'Test',
allowBlank:false, // This is the property which will check the validation
},
{
xtype: 'ux.button',
text: 'Submit',
width: 120,
formBind: true
}]
}]
I want to add a field dynamically when click on button in extjs 4.What I have done is added a onchange function on add button and write the adding textfield logic in that function.
Here is my code.
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
requires: ['Ext.form.Panel'],
title : 'Edit User',
layout: 'fit',
autoShow: true,
height: 300,
width: 280,
id : 'mainPanel',
initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'dyForm',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Add',
scope: this,
handler: this.onChange
},
];
this.callParent(arguments);
},
onChange : function(){alert('test');
var form=Ext.getCmp("mainPanel");
form.items.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
form.doLayout(true);
}
});
And I also want that on edit of this form I will load data to those new fields that i have newly created dynamically.
Change the onChange function to
onChange : function(btn){
// var form=Ext.getCmp("mainPanel");
var form = btn.up('window').down('form'); // this is a better approach
form.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
}
should do it. You added the field directly to the collection where you should have use the supplied add method of the form component.
see JSFiddle