I have been able to put tools into window title bars before, but would like to be able to do the same thing to a Panel.
This was my attempt:
panel = new Ext.Panel({
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
initComponent:function(){
var config = {
tools:[{
id: 'gear',
handler: function(){...}
}]
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
Ext.Panel.superclass.initComponent.apply(this, arguments);
}
}
Some advice would be greatly appreciated
JJ
The previous posts are correct, but I thought I would explain why what you are doing is wrong.
You are completely redefining the initComponent method of Ext.Panel in the object you are creating, and the default Ext.Panel.initComponent needs to run in order to setup things like tools.
In your code, when you call Ext.Panel.superclass.initComponent, you are calling Ext.BoxComponent.initComponent, not the existing Ext.Panel.initComponent.
In order to do special initComponent things, and then call up to Ext.Panel.initComponent, you need to create an extension of Ext.Panel:
MyPanelClass = Ext.extend(Ext.Panel, {
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
initComponent:function(){
var config = {
tools:[{
id: 'gear',
handler: function(){...}
}]
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
MyPanelClass.superclass.initComponent.apply(this, arguments);
}
});
And then later:
var mypanel = new MyPanelClass();
You seems to have mixed up with many things in your code. You seems to be trying to extend the panel and use region property. The region property is used for border layout.
here is how:
panel = new Ext.Panel({
id: 'my_panel',
title:'MyTitle',
iconCls:'helpIcon',
tools:[{
id: 'gear',
handler: function(){...}
}]
});
If you need to extend you will have to use the Ext.extend() method.
You are almost there.
panel = new Ext.Panel({
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
tools:[{
id: 'gear',
handler: function(){...}
}]
};
Related
I want to do something like this jsfiddle example, I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field
YUI().use('aui-form-builder',function (Y) {
Y.MyFormCustom = Y.Component.create({
NAME: 'form-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.FormBuilderFieldBase,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
var availableFields = [
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'custom'
}
];
myform= new Y.FormBuilder({
availableFields: availableFields,
boundingBox: '#myHolder'
}).render();
I don't know why the form is not appearing. Any help will be appreciated.
Your example has been very helpful to me because I also needed to extend the Form Builder fields.
The fix to the above is simple.
Replace the line:
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
by
Y.FormBuilderField.types['custom'] = Y.MyFormCustom;
This solution is inspired from the source code found in the Alloy UI API.
See link:
AlloyUI Form Builder
Cheers
Disclaimer: I am relatively new to ExtJS (version 5.01). I am hoping to reach some ExtJS experts to point me in the right direction:
I am getting an error when specifying an initComponent method within an items config. The code below generates the error:
"Uncaught TypeError: Cannot read property 'items' of undefined"
The error disappears when the 'initComponent' function of the north-child panel is commented out. I have the feeling I missed something on initialization order.
Q: How can I specify an initComponent method of a child item within the items configuration?
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
title: 'North Child',
/* Problematic function: If commented, it works */
initComponent: function(){
console.log("test north child");
this.callParent(arguments);
}
}],
initComponent: function(){
console.log("Test parent");
this.callParent(arguments);
}
});
Short answer: You can't define initComponent on a child, because you can't do anything there that can't be done anywhere else.
InitComponent is executed when an instance of the component 'MyApp.view.TestView' is created (you only defined it here, using Ext.define). It can be created using Ext.create('MyApp.view.TestView',{, or by creating another view that has this component added as an item, or by deriving another component (extend:'MyApp.view.TestView').
All the child components are also created when 'MyApp.view.TestView' is created, so the initComponent function on the child would be superfluous, because the child cannot be created without the parent, so the initComponent of the parent can be used for everything that you want to do in the child's initComponent.
If you need sth. to be calculated before the items can be addded, you would proceed as follows:
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
initComponent: function(){
var me = this,
tf = Ext.getCmp("someTextField"),
myTitle = (tf?tf.getValue():'');
Ext.applyIf(me,{
items: [{
xtype: 'panel',
region: 'north',
title: myTitle,
}]
});
this.callParent(arguments);
}
});
Please refer to the docs what exactly Ext.applyIf does (and how it differs from Ext.apply, because that function also comes handy sometimes).
I have a extend FormPanel:
Ext.ns('myapp');
myapp.StandartForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,xtype: 'test'
,frame:true
,initComponent: function(){
var self = this;
this.editWindow = new Ext.Window({
id: 'editWSWin',
layout: 'fit',
title:this.editPanelTitle,
autoScroll:false,
width:300,
html:'hi'
});
var config = {
items: [{
layout:'column',
items:[this.grid],
buttons: [{
text: 'Edit',
id: "editBtn",
handler: this.editFormCreate,
scope: this,
hidden: this.editbuttonHidden,
disabled:true
}]
}]};
// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
myapp.StandartForm.superclass.initComponent.call(this);
}
, editFormCreate : function (){
this.editWindow.show();
}
});
Ext.reg(myapp.StandartForm.prototype.xtype, myapp.StandartForm);
In this panel i press button Edit and window showing. After i close window and press Edit button again but get error:
TypeError: b.dom is undefined
I think it's mean that my window undifined.
How can i extend FormPanel to be able use window correctly?
UPDATE
function to create window:
function test(){
var editWindow = new Ext.Window({
id: 'editWSWin',
layout: 'fit',
title:this.editPanelTitle,
autoScroll:false,
width:300,
html:'hi'
});
return editWindow
}
and call it:
, editFormCreate : function (){
test.show();
}
But its undifined.
When you close the window, it gets destroyed, so you can't show it again. You need to either:
Set the closeAction property on the window
Create the window inside editFormCreate each time
When you close a Ext.Window, you dispose of the DOM elements it creates so there is nothing to show anymore. You need to instantiate a new one before showing it in this case.
I want to make a default config file according to which I will create my view.
I am thinking of something like:
var Application = {};
Application.Config = {
ViewerModule : {
width : '60%',
height : '60%',
maxWidth : '99%',
minWidth : '1%',
iconSize : '24*24',
defaultColor : 'Green',
selectedColor : 'Orange',
fontColor : 'Black',
viewerToolColor: 'White',
defaultView : 'Fit To Screen',
Labels:{
btnZoomIn :'Zoom In',
btnZoomOut :'Zoom Out',
btnRotateLeft :'Rotate Left',
btnRotateRight:'Rotate Right',
btnFitToScreen:'Fit to Screen',
btnFullScreen :'Full Screen',
btnSaveAs :'Zoom In',
btnExport :'Zoom Out',
btnPopOut :'Rotate Left',
btnEmail :'Rotate Right',
btnPdfConverter:'Fit to Screen',
btnSetting :'Settings'
}
}
}
And so when I create my view in backbone, I can use this config value to define default values of my Backbone View.
One thing I thought was save values from config file to a backbone model and create a view with that model.
However, I am not sure if this is the right thing.
Can share me your thoughts or examples on how I can achieve it.
Have you considered using inheritance to overcome this problem? Instead of a config you could have a BaseView that has the aforementioned properties as view options. This way, these values could be overwritten in the implementation of your child view, or parsed in during construction of the child view.
Here's a crude example:
var BaseView = Backbone.View.extend({
initialize: function() {
this.options = {
'Example': 'Foobar',
'OverrideMe': 'Moo'
};
}
})
, ChildView = BaseView.extend({
initialize: function() {
this.options.Example = 'Something else';
}
})
, impl = new ChildView({'OverrideMe': 'Another thing'});
Here's a fiddle that shows it working.
You could mix in your config object into the prototype of your view with _.defaults if you want to set defaults for your views, with _.extend if you prefer to force the values.
For example,
var Application = {};
Application.Config = {};
Application.Config.ViewerModule = {
width: '60%',
height: '60%'
};
var V = Backbone.View.extend({
width: '50%'
});
_.defaults(V.prototype, Application.Config.ViewerModule);
var v = new V();
console.log(v.width, v.height);
And a demo http://jsfiddle.net/nikoshr/VX7SY/
If I understood you, i suggest You use Model defaults, and here you can see simple example. Or you can use your config like json object, but by the way you must to create empty Model and set config json to model(=new Model)
I am trying to create items inside a component as it gets initialized, with a function.
Consider the following:
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
config:{
items: [{
xtype: 'textfield',
name: 'Name',
label: 'Name'
}]
});
Ext.application({
viewport: {
layout:'fit'
},
launch: function(){
Ext.Viewport.add(Ext.create('mobi.form.Login'));
}
})
I am trying to get The mobi.form.login to generate its config from a function that runs on initialize ( or whatever I can use to over write the config I specify ).
I know Sencha touch 2 has the constructor, and initialize function, but both of them seem to have arguments=[] ( eg an empty array )
This is more or less how it would look if I was doing it in ExtJS 4.x:
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
initComponent:function(config){
config=Ext.apply({}.config,{});//make sure config exists
config.items= [{
xtype: 'textfield',
name: 'Name',
label: 'Name'
}]
Ext.apply(this, config);
this.callParent(arguments);
}
});
If you ever wanted to do this, you could use constructor or initialize.
Constructor you would use for synchronous logic which will be fast and you want to happen before the component is initialized. You can access the configuration through the constructors first argument:
Ext.define('MyComponent', {
extend: 'Ext.Component',
constructor: function(config) {
console.log(config);
this.callParent([config]);
}
});
Ext.application({
launch: function(){
Ext.create('MyComponent', { test: 1 })
// Will log out:
// {
// test: 1
// }
}
});
Remember you will always need to callParent with the config/arguments within constructor.
In any other situation, you should use initialize which is called after all the config's have been... initialized. :) We use this a lot internally for adding listeners.
initialize: function() {
this.on({
...
});
}
you don't need to call initialize manually it is already done by constructor and when calling this function you can access items data using this.items and create panel items there
Ext.define('mobi.form.Login',{
extend:'Ext.form.Panel',
config: {
items: []
},
initialize : function()
{
this.items = [Ext.create({
xtype: 'textfield',
name: 'Name',
label: 'Name'
})];
this.callParent();
}
});
Ext.application({
viewport: {
layout:'fit'
},
launch: function(){
Ext.Viewport.add(Ext.create('mobi.form.Login'));
}
})
Use the following:
Ext.apply(this, {
items: [
....
]
});
Have you tried something similar to this? I'm just passing a config object to Ext.create, though I can't test it right now. See http://docs.sencha.com/touch/1-1/#!/api/Ext-method-create
Ext.Viewport.add(Ext.create(
{
xtype: 'mobi.form.Login',
items: [ /*A list of items*/ ]
}
));
You could stick this snippet in its own function as well, one that takes in items as a parameter. Hope this solves your problem!