why i can't set 'Config options' by methode SET
set({value: 'new value',disabled:true});
how i can set 'Properties' for a field
var name = {
fieldLabel:'Name',
value: 'Test',
id:'id-name',
xtype: 'textfield',
};
this.form= new Ext.FormPanel({
items:[name],
buttons: [{
text : 'set value',
handler: function() {
Ext.getCmp('id-name').set({value: 'new value',disabled:true});
}]
});
Resetting component properties using an object is not part of the design of Extjs. The config is used in object creation and when first used in the constructor is applied to the object itself using special methods from the Extjs class system core to generate getters and setters and then initialize the component from them. It is not possible to do what you are trying to do and get the desired result. In your example above, the textfield is initialized with your config overriding the default values of the component during creation and then it generates getters and setters for certain attributes, like value, id, and fieldLabel which need to be used instead of config objects after a component is created. To make your example work, you need to do this:
var name = {
fieldLabel:'Name',
value: 'Test',
id:'id-name',
xtype: 'textfield',
};
this.form= new Ext.FormPanel({
items:[name],
buttons: [{
text : 'set value',
handler: function() {
var myTextField = Ext.getCmp('id-name');
myTextField.setValue('new value');
myTextField.setDisabled(true);
}]
});
Related
i have problem with ext js, i want to get value from my field using reference in my store, but when i console.log i got error lookupReference is not a function.
my form
items: [
{
xtype: 'combobox',
name: 'REC_TERMINAL_CODE_2',
fieldLabel: 'Terminal 2',
emptyText : 'Terminal',
reference: 'terminal2'
},
{
xtype: 'combobox',
name: 'REC_TERMINAL_CODE',
fieldLabel: 'Terminal',
emptyText : 'Terminal',
store: {
type: 'terminal'
},
displayField: 'terminal_name',
valueField: 'terminal_code',
value: 'T01',
minChars: 3,
queryParam: 'q',
queryMode: 'remote',
editable: false,
allowBlank: false,
fieldStyle: 'text-transform:uppercase',
afterLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="Required"> *</span>'
],
flex: 1
},
]
in my terminal store file
listeners: {
load: function (store, records, success) {
console.log(this.lookupReference('terminal2'))
if (!success) {
Ext.Msg.confirm('Status Error', 'This connection failed, reload ?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
}
}
A store is not a component so you can use getReferenceHolder(). You can use the generic Ext.ComponentQuery.query('combobox[reference=terminal2]')[0]
This would return an array of components that fit the query.
First, this in your listener is not refer to a component such as combobox, etc. Maybe it refers to the store instance or the controller class. Try to make sure that you access the component instance. It can be determined by logging to console, a default component in ExtJs has a xtype property such as combobox,container,etc. Once you can access the component (parent component), you can find it's child which has named reference by using a function.
Second, based on their docs, You can get the component by it's reference by using parentComponent.getReferences()['PARTICULAR_REFERENCE_NAME'] function. a parentComponent can be a form, container, or etc. I don't know what version of ExtJS you are using, getReferences function maybe does not exist in lower version.
If You want to fetch the ExtJS component in view as Above example.
Then you have enabled referenceHolder Property to true.
Refer to this link for example:
Fetching ExtJs Component in View
This property enables view as reference holder of component
for more details Please Refer sench docs link:
Sencha docs ReferenceHolder
I've been trying to add dynamic content to my dialog based on specific object in my JSONmodel, which is an array of objects.
My model has the following structure, I've set it like this(dummy data):
Note: I have multiple models active in this controller's view, each of which has its own model data.
this.setData( emp: [
{
col1: "1.4",
col2: "2.0",
col3: "3.1"
},
{
col1: "4.1",
col2: "5.3",
col3: "6.5"
}
]);
So I've set the model data successfully and now I am able to access it via:
var modelData= this.oView.getModel("myModel").oData;
What I want now is to dynamically create sap.m.Dialog and dynamically fill it with multiple sap.m.Input elements which have values based on a single object from my model:
var getDialogContent = function(modelData){
var arr = [];
var keys = Object.keys(modelData[0]); // property names. I hard-coded first obj for test.
// I want to use these properties and bind a new input on dialog for each property.
jQuery.each(keys, function(i, key) {
// 'myModel>/emp/0/'+key is a supposed full path to property...
// according to this link:
// https://sapui5.hana.ondemand.com/1.36.6/docs/guide/91f0ed206f4d1014b6dd926db0e91070.html
newInput.bindProperty("value", 'myModel>/emp/0/' + key); //key is col1 the first time
newInput.setProperty("description", key);
newInput.setProperty("type", sap.m.InputType.Number);
arr.push(newInput);
});
return arr;
};
I call getDialogContent() in the content property of the dialog to set its content.
Now, everything works save for the binding newInput.bindProperty("value", 'myModel>/emp/0/' + key);, the input fields that are displayed are just empty and show no sign of binding, also newInput.getBindingContext("myModel"); returns undefined.
var dialog = new sap.m.Dialog({
title: 'Dynamic dialog: ',
type: 'Message',
content: getDialogContent(modelData),
buttons: new sap.m.Button({
text: 'Cancel',
press: function () {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
Does anyone have any idea what is wrong here and why can't I bind my property to the input element? I basically just want to bind values of my dynamic input fields to arbitrary object from object array in my JSON Model. Any suggestion is welcome.
Edit(Solution):
On the var keys = Object.keys(modelData[0]); line I replaced modelData[0] with modelData["emp"][0] as I was accessing specific object form JSONModel. Now it works.
Did you add the dialog to the dependents of your view? When I remove that step in our app, the result is exactly as you described: The fields are empty and getBindingContext() returns undefined.
One of the best way to implement a dialog in a reusable manner is the one described in this link. You have to add the dialog as dependent to the "parent" view in order to retrieve the models set on that view.
onDialogOpen: function () {
if (!this.oDialog) {
this.oDialog = new sap.m.Dialog({
title: 'Dynamic dialog: ',
type: 'Message',
content: getDialogContent(modelData),
buttons: new sap.m.Button({
text: 'Cancel',
press: function () {
this.oDialog.close();
}.bind(this)
}),
afterClose: function() {
this.oDialog.destroy();
}.bind(this)
});
//to get access to the view models
this.getView().addDependent(this.oDialog);
}
this.oDialog.open();
},
I'm trying to render a form within a custom row grid without success.
handler: function (button, record, pressed, eOpts) {
var grid = this.up('grid');
var store = grid.getStore();
var innerPanel = Ext.widget('form', {
//renderTo: record,
title: 'Title Test',
name: 'test',
items: [{
xtype: "textfield",
name: "testfield",
fieldLabel: "FooTest"
}]
});
// store.add(record);
store.add(innerPanel);
}
Any idea how to do this?
Fiddle: https://fiddle.sencha.com/#fiddle/183e
Thanks.
EDITED with taubi19 sugestion.
I think you don't quite understand the concepts yet. The form is a part of the view, the store is an object, that takes care of the data. You want to have a column in which each row is a form. This means you need a column whose xtype is not textfield, but something custom. I found out on senchas kitchen sink, that we need a 'widgetcolumn ' . In your fiddle, change the columns array with the following code and you will have a form in each new row.
columns:[
{
header:'Name',
dataIndex:'name',
flex:1,
xtype:'widgetcolumn',
widget:{
width:400,
xtype:'form',
items:[
{
xtype:"textfield",
name:"testfield",
fieldLabel:"FooTest"
},
{
xtype:"textfield",
name:"testfield1",
fieldLabel:"FooTest1"
}
]
}
}
]
And I suggest you remove adding the form to the store. You add records/data to stores. The store.add method takes a model instance as a parameter (Ext.data.Store.add).
I am new to ExtJs, just stepped into some basic things and found that its very hard to get started as a beginner.
Below are the two ways of implementing Ext button:
Sample1:
var nextBtn = new Ext.Button({
text: 'Next >>',
handler: function() {
Ext.getDom('form_main').submit();
},
id: 'next',
renderTo: 'next'
});
Sample2:
Ext.widget('button', {
text: 'some long title of my cool button',
scale: 'large',
cls: 'my-button',
width: 100,
renderTo: 'output'
});
My guess is beacuse of the version, it has changed. Please let me know what is the difference between these two codes.
Regards,
There are many ways to instantiate a class in ExtJS.
Take this definition as example:
Ext.define ('Ext.button.Button', {
alias: 'widget.button' ,
// here other properties and methods ...
});
Then you can chose one of these ways to instantiate Ext.button.Button:
First: javascript style
var button = new Ext.button.Button ({
// props and methods
});
Second: ExtJS style with Ext.create method
var button = Ext.create ('Ext.button.Button', {
// props and methods
});
Third: ExtJS style with Ext.widget method (it uses alias property)
var button = Ext.widget ('button', {
// props and methods
});
I suggest you to use the second or the third way because they use ExtJS dynamic loader: here's the documentation
I use ExtJs 4.1 and DeftJs.
When using multiple instances of the same views at the same time, there is a problem addressing a component given the id: 'abc' since all instances will have the same id.
So how do I name the ids to prevent this?
One option is to create the components dynamically.
Another option that I would prefer is calling an component by id only of a certain view, like:
this.getView.getComponent('x').getId('abc')
If you can set the parent element to a unique id, you can use the itemId property on child items. Example of this from sencha's documentation (taken from the link below it):
var c = new Ext.panel.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
{
itemId: 'p1',
title: 'Panel 1',
height: 150
},
{
itemId: 'p2',
title: 'Panel 2',
height: 150
}
]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-itemId
I try to avoid global ids and use this.getView().getComponent() from a controller to access my view. If necessary I additionally use a unique string in my id name.