I want to break sencha architect 2 generated code into different classes
What i want is declare a tabpanel in another class and use instantiated class in the following code.
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 430,
width: 748,
layout: {
type: 'fit'
},
title: 'Add New Business Unit',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
frame: true,
activeTab: 0,
items: [
{
I think I understand what you are trying to do. So instead of typing up an answer(I feel lazy today...), I just created a short screencast which I hope explains what your are trying to achieve. http://screencast.com/t/RhiMAreJBTwb
Related
Suppose we have defined a component (e.g. FieldSet) that we'd like to reuse in the single app (e.g. display/use it in 2 different modal windows.) This FieldSet has a reference, which we use to access it. The goal is to have these 2 windows contain independent fieldsets, so we can control and collect the inputs from each one separately.
Here's the sample fiddle that demonstrates the problem. As soon as any function triggers any lookupReference(...) call, Sencha issues the warning for "Duplicate reference" for the fieldset. It correctly creates two distinct fieldset components (by assigning different ids) on each window, but fails to properly assign/locate the references. As a result, any actions on one of these windows' fieldsets would be performed on the "unknown" one (probably on the first created one), messing up the UI behavior.
I see how it is a problem for Sencha to understand which component to use when operating on the reference, but there should be a way to reuse the same component multiple times without confusing the instances. Any help is greatly appreciated.
According to the docs on ViewController:
A view controller is a controller that can be attached to a specific view instance so it can manage the view and its child components. Each instance of the view will have a new view controller, so the instances are isolated.
This means that your use of singleton on your ViewController isn't correct, as it must be tied to a single view instance.
To fix this, I'd recommend making some modifications to your Fiddle, mainly removing the singleton: true from your VC class, accessing the views through lookup, and getting their VC's through getController to access your func method.
Ext.application({
name: 'Fiddle',
launch: function () {
/**
* #thread https://stackoverflow.com/questions/67462770
*/
Ext.define('fsContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.fsContainerHandler',
// TOOK OUT singleton: true
func: function () {
var x = this.lookupReference('fsRef');
alert(x);
}
});
Ext.define('fsContainer', {
extend: 'Ext.container.Container',
xtype: 'xFSContainer',
controller: 'fsContainerHandler',
items: [{
xtype: 'fieldset',
title: 'myFieldset',
reference: 'fsRef'
}]
});
Ext.define('mainContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainContainerHandler',
singleton: true,
onButton1Click: function () {
var win = this.getView().window1;
win.show();
// CHANGED LOGIC
win.lookup('theContainer').getController().func();
},
onButton2Click: function () {
var win = this.getView().window2;
win.show();
// CHANGED LOGIC
win.lookup('theContainer').getController().func();
}
});
Ext.define('mainContainer', {
extend: 'Ext.container.Container',
width: 400,
controller: 'mainContainerHandler',
window1: null,
window2: null,
initComponent: function () {
this.window1 = Ext.create('window1');
this.window2 = Ext.create('window2');
this.callParent(arguments);
},
items: [{
xtype: 'button',
text: 'Window 1',
reference: 'btn1',
handler: mainContainerHandler.onButton1Click,
scope: mainContainerHandler
}, {
xtype: 'button',
text: 'Window 2',
reference: 'btn2',
handler: mainContainerHandler.onButton2Click,
scope: mainContainerHandler
}]
});
Ext.define('window1', {
extend: 'Ext.window.Window',
title: 'Window1',
modal: true,
width: 100,
height: 100,
closeAction: 'hide',
// ADDED referenceHolder
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
// ADDED reference
reference: 'theContainer'
}]
});
Ext.define('window2', {
extend: 'Ext.window.Window',
title: 'Window2',
modal: true,
width: 100,
height: 100,
closeAction: 'hide',
// ADDED referenceHolder
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
// ADDED reference
reference: 'theContainer'
}]
});
Ext.create('mainContainer', {
renderTo: document.body
});
}
});
I want to integrate Medium Editor to ExtJs6 but I don't know how to do. I download the editor from https://github.com/yabwe/medium-editor. I thank you so much for your collaboration.
Add dependency library url's to index.html
Create custom component
Use afterrender method on custom component and use your library api inside it
Preserve the instance of library variable inside custom component for further use.
Its not too much complicated as it sounds from above list.
Here is an example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('widget.mediumEditor', {
extend: 'Ext.panel.Panel',
alias: 'widget.mediumEditor',
xtype: 'mediumEditor',
padding: 20,
html: "<div class='editorcontent'></div>",
height: 400,
listeners: {
afterrender: function(component) {
var mediumEditor = new MediumEditor('.editorcontent', component.editorConfig);
component.editorInstance = mediumEditor;
}
}
});
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: 'fit',
title: 'Medium editor',
items: [{
xtype: 'mediumEditor',
editorConfig: {
toolbar: {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection: true,
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
diffLeft: 0,
diffTop: -10,
firstButtonClass: 'medium-editor-button-first',
lastButtonClass: 'medium-editor-button-last',
relativeContainer: null,
standardizeSelectionStart: false,
static: false,
/* options which only apply when static is true */
align: 'center',
sticky: false,
updateOnEmptySelection: false
}
}
}]
})
}
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29v0
I was trying to develop a base container by extending Ext.Container, which have some default items in it. A subclass should add the items to the child component of the base class and not directly to the container instead. How to do this?
May i override the setItems/applyItems method to add the items to navigationView.add(items); ?? I'm unsure about how this works. Since i'm new to ExtJs, unable to identify which is the way to do it generically so that it won't affect my subclass to add n number of items to it either using inline or add(item) method.
AbstractClass
Ext.define('MyApp.container.AbstractMainContainer', {
extend: 'Ext.Container',
xtype: 'abstractmaincontainer',
requires: [
'MyApp.container.NavigationView',
'MyApp.control.NavigationBar'
],
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
width: '100%'
},
controller: 'maincontroller',
items: [{
xtype: 'navbar',
itemId: 'navbar'
}, {
xtype: 'navigationview',
itemId: 'navigationview',
reference: 'navigationview',
navigationBar: false,
layout: {
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
items: [
// new item should added here
]
}],
/**
* #method getContentView add the items to this rather than directly
* #return {void}
*/
getContentView: function() {
return this.down('#navigationview');
},
});
SubClass
Ext.define('MyApp.main.view.MainContainer', {
extend: 'MyApp.container.AbstractMainContainer',
requires: [
'MyApp.container.AbstractMainContainer'
],
config: {
},
items: [{
// we should not directly add items here this will remove the navbar and navigation view
// HOW TO ADD THIS IN A GENERIC WAY??
xtype: 'container',
layout:{
type:'card'
},
items: [{
xtype: 'button',
role: 'nav',
title: 'Card 1',
text: 'go to next',
handler: function() {
}
}, {
itemId: 'myCard',
title: 'Card 2',
html: '<h1>Card 2</h1>'
}],
}],
});
AFAIK, there's no "automatic" way to do it.
I can suggest some approaches:
First of all, check if you really need to do this: for example, you could move the navbar to the dockedItems config and move the navigationview one level up.
So your AbstractContainer will extend navigationview, navbar will be a dockedItem, and you will be able to use the items config as usual.
Otherwise, you could use a different config (let's say "extraItems" or "navItems"), and merge them overriding the abstract class initComponent function.
There, after a callParent that actually initialize the navigationview, you could do something like
this.down('navigationview').add(this.extraItems);
I am using the lastest sencha cmd for the build with ext-5.0.1.
Everythings look good during the development status (http://www.imageupload.co.uk/5Med) but after the build.
All the textfields collapsed like shown (http://www.imageupload.co.uk/5MeQ), and have no response to the changes in width, minWidth, flex... etc.
And also the properties y and x are not functioning.
If someone had had similar situation before, please help, thx
My cmd is v5.0.3.324
Here are part of my code:
In my Main.js:
Ext.define('ExtTest2.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'ExtTest2.view.main.MainController',
'ExtTest2.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'fit'
},
itemId:'Stage'
});
MainController.js:
Ext.define('ExtTest2.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
init: function(){
this.Start();
},
Start: function(){
var data = {
itemId: "Page_Login",
xtype: "panel",
items: [
{
padding: 30,
layout:{
type: 'vbox',
align: 'center'
},
xtype: "fieldset",
y: "30%",
height: 150,
items: [
{
xtype: "textfield",
itemId: "Textfield_Username",
fieldLabel: "用戶名稱",
labelStyle: "color:#FFFFFF"
},
{
fieldLabel: "密碼",
itemId: "Textfield_Password",
labelStyle: "color:#FFFFFF",
xtype: "textfield"
},
{
itemId: "Button_Login",
text: "登入",
width: 100,
xtype: "button"
}
]
}
]
};
var container = Ext.ComponentQuery.query('#Stage')[0];
container.removeAll();
container.add(data);
container.updateLayout();
}
});
It is overnested because you add unnecessary container to app-main containing the fields.
It is very unusual to manipulate views from view controller like that - create a class for the fieldset, give it an alias (xtype) and simply instantiate that. Cramming controller handlers together with view definitions shall inevitably lead to Spaghetti Code.
You use vbox layout, without any flex or height to hold form fields. Form fields behave best in anchor layout that is the default for Ext.form.Panel.
I am new to extjs in general, specially to 4 version:
I have created a class:
Ext.define('MyPanel', {
extend:'Ext.panel.Panel',
views: ["MyPanel"],
config: {
width: 200,
height: 300,
title: "HELLO"
},
constructor:function(config) {
this.initConfig(config);
return this;
},
alias: 'widget.MyPanel'
});
Next, I want to call this class in form of XTYPE in a tabPanel items:[]:
I did like this:
items: [{
title: 'Kontakt',
id: 'kontaktTab',
closable:true,
closeAction: 'hide',
layout: 'fit',
items:[{
xtype: "MyPanel"
}]
No luck yet, all I get is :
Cannot create an instance of unrecognized alias: widget.MyPanel"
You must think, what a noob....
;-)
Someone please help!!!
When you are defining your view (MyPanel), why have you set views property?
Ext.define('MyPanel', {
extend:'Ext.panel.Panel',
alias: 'widget.MyPanel'
views: ["MyPanel"], <------ Why do you need this???
config: {
width: 200,
height: 300,
title: "HELLO"
},
constructor:function(config) {
this.initConfig(config);
return this;
}
});
And when you are making use of the new view, you need to specify it in requires. Here is an example:
Ext.define('MyApp.view.Viewport',{
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'MyPanel' <--- This will ensure that this view file needs to be loaded
],
.
.
.
items: [{
title: 'Kontakt',
id: 'kontaktTab',
closable:true,
closeAction: 'hide',
layout: 'fit',
items:[{
xtype: "MyPanel"
}]
Hrm, have you tried lowercasing your alias. I thought aliases were always stored and fetched lowercase, but not sure about it
Ah, hehe, I completely overlooked something:
with an 'alias' you are creating a new class reference in the ExtJS class list. So by adding the alias like you did above, you can instantiate it by calling
var newMyPanel = Ext.create('widget.MyPanel');
However, if you are adding an instance with a xtype specifier you have to omit the widget part and just do:
var myContainer = Ext.create('Ext.panel.Panel',{
items: [{
xtype: 'MyPanel'
}]
});
With the above code, Ext will look for class with the alias 'widget.MyPanel'.
Apart from this, I think your constructor is a bit funky looking. The constructor should not return itself (like you would do in a Perl constructor for instance)
This is enough:
constructor: function() {
this.callParent(arguments);
// Your own code here
}
Cheers and let me know if it helps
Rob
all u have to do is declare it like that :
var panel1 = Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});//title and hight are optionals if u have already defined them
and then use it like this:
...
items : [panel1 ]
...
and you may need to require it :
Ext.require([
, 'Ext.app.myPanel'
]);
and put the mypanel.js an app folder
hope this helps