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
Related
In SAPUI5, you can often bind resource bundle properties to items in several ways. I'm attempting to do it in JavaScript, using data provided by an Odata service, but the methods I've found here so far haven't worked. I've tried two different ways:
How to Use Internalization i18n in a Controller in SAPUI5?
binding issue with sap.m.List and model configured in manifest.json
And neither of these have worked. I feel this is because I'm inside a items list, inside of a dialog that's causing my issue:
My code is:
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: resourceBundle.getProperty("{Label}"),//"{ path : 'Label', fomatter : '.getI18nValue' }",
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
getI18nValue : function(sKey) {
return this.getView().getModel("i18n").getProperty(sKey);
},
Using the 2nd method above, never calls the JavaScript method. I didn't think it would work, as it's more JSON based. The first method, loads the data fine, but instead of showing the resource bundle text, it shows just the text found inside of the {Label} value.
The value found inside of {Label} matches the key found inside of the resouce bundle i.e. without the i18n> in front, like you would have in a view.
Anyone have any suggestions?
Use of formatter will solve your problem, but the way you're doing it is wrong. Try this, it will solve your problem.
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: {
parts: [{ path: "Label" }],
formatter: this.getI18nValue.bind(this)
},
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
}
And the formatter function getI18nValue will be like this,
getI18nValue: function(sKey) {
return this.getView().getModel("i18n").getResourceBundle().getText(sKey);
},
I'm trying to edit open source program called PartKeepr (v0.1.9). In a specific part of program I want to add a button that opens a new Ext.window.Window. My codes are as following which doesn't work (I'm pretty new in extjs but I'm given a hard task I guess, so I'm open to all advice for where to start learning, I'm just trying to learn from existing codes and apply some things by looking similar parts of available code)
Ext.define('PartKeepr.FindWindow',{
extend:'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton=Ext.create("Ext.button.Button",{
text:i18n("OK")});
this.buttons=[this.okButton];
}
});
{
xtype: 'button',
text: i18n("Find"),
name: 'findButton',
handler: Ext.bind(this.findNumber, this)
}
findNumber: function(){
var j = new PartKeepr.FindWindow();
j.show();
}
Edit: When I press the find button, console giving me the following error: ext-all.js:21 Uncaught TypeError: Cannot read property 'insert' of undefined
You need to call the superclass initComponent method:
Ext.define('PartKeepr.FindWindow', {
extend: 'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton = Ext.create("Ext.button.Button", {
text: i18n("OK")
});
this.buttons = [this.okButton];
this.callParent();
}
});
I'm trying to extend a MessageBox within a view so I can reuse it throughout my application.
It seems that when I do so, I lose some of the default functionality that makes the messagebox useful (msg, button definitions, icon definitons, default drag constraints, etc). Documentation is a little confusing as it seems configs should be defined within the show() function, and I'm unsure of how to set them within my view.
How can I truly extend a messagebox component as a view?
Basic MessageBox (what I want to create with my view):
Ext.Msg.show({
title:'Error',
msg: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
});
Renders:
but when I show my view:
Ext.create('IOL.view.app.Message').show();
I basically end up with a vanilla Panel/Window component
Ext.define('IOL.view.app.Message', {
extend : 'Ext.window.Window',
config: {
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent : function() {
Ext.apply(this, {
xtype: 'messagebox',
width: 400,
height: 200,
title:'Error',
html: 'There was an error.',
buttons: [
{ text: 'Button 1' }
]
});
this.callParent(arguments);
}// initComponent
});
Renders:
It seems you are extending an Ext.window.Window and applying the messagebox configs to it. Why not just extend Ext.window.MessageBox:
Ext.define('IOL.view.app.Message', {
extend : 'Ext.window.MessageBox',
width: 400,
height: 200,
title: 'Error',
html: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.ERROR,
// whatever else you want to do
initComponent : function() {
this.callParent(arguments);
}
});
#EricCook brings up a good point below. The MessageBox class is designed for reuse in the app as a singleton not really for subclassing.
In your question you said:
I'm trying to extend a MessageBox within a view so I can reuse it
throughout my application
I can understand that if you want to create a different type of messagebox that you would call with the normal Ext.Msg.show method, you could extend the MessageBox with your own buttons or icons I suppose.
But for regular use this isn't something you need to extend. For repeated use in your app you could hold a reference to the message box config you want in the controller like:
// SomeController.js
errorMsg: {
title:'Error',
msg: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
},
Then whenever you want to call that type of message you could use (assuming the scope is the controller itself, or you could get a reference to the controller beforehand):
Ext.Msg.show(this.errorMsg);
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);
}]
});
I am currently trying to add a custom button that will be able to call when ever the user wants to add a new button using EXTJS 4.
Here is the TimeButton.js file that i want to use to create the button
Ext.namespace("Ext.controls");
Ext.create('Ext.Button', {
text: 'Time',
renderTo: Ext.getBody(),
handler: function() {
alert('The current time is '+Date())
}
});
Ext.reg('timebutton', Ext.controls.TimeButton);
but when ever i try add it to any form i get the following error
types[config.xtype || defaultType] is not a constructor
Or would it be better to do something like this
Ext.controls.TimeButton = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
frame: true
,height: 330
,layout: 'border'
,layout: 'column'
,split: true
,cls: 'DocumentWindow'
,items: []
});
this.documentGrid = new Ext.controls.DocumentGrid({height: 220,
agentId : this.agentId,
columnWidth: 0.5})
Ext.controls.DocumentPanel.superclass.initComponent.apply(this, arguments);
}
From what i understand this happens when trying to instantiate (create) a component that does not exist but i do not see where the error might be! is there an error in the code that I have posted?
Define your button as a class, register it for using with xtype by providing alias property and instantiate it in the parent items container. Here is an example.