I have a some class
AddOrgWindowUI = Ext.extend(Ext.Window, {
title: 'form',
width: 400,
height: 198,
layout: 'form',
padding: 5,
initComponent: function() {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'parapapa',
anchor: '95%',
value: m,
emptyText: 'perapapa'
}
];
AddOrgWindowUI.superclass.initComponent.call(this);
}});
when I create an object var AddOrgWindowForm = new AddOrgWindowUI('aaa'); I want to get arg ('aaa') to my new form value (value m). How get it?
Im trying initComponent: function(m) { and thats not working.
The initComponent function is called internally on one of the base classes of Ext.Window. You shouldn't try to call it directly. That is why it won't handle your own parameters.
So I recommend you to use the standard form parameters when extending ExtJS classes.
It is as simple as initializing the object with the property or methods you want to override (or insert in case the property is not in there already). And then just using the this keyword to access them.
This is possible because for every Ext.Component and its subclasses, the first parameter passed to the constructor should be an object, and every member in that object will be copied to the new object constructed. And most ExtJS classes extend directly or indirectly from Ext.Component, and you are extending from Ext.Window which extends from Ext.Component too.
Here you have your example fixed:
var AddOrgWindowUI = Ext.extend(Ext.Window, {
title: 'form',
width: 400,
height: 198,
layout: 'form',
padding: 5,
initComponent: function() {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'parapapa',
anchor: '95%',
value: this.initialValue,
emptyText: 'perapapa'
}
];
AddOrgWindowUI.superclass.initComponent.call(this);
}
});
function test() {
var AddOrgWindowForm = new AddOrgWindowUI({initialValue:'aaa'});
AddOrgWindowForm.show();
}
pass m as an arg of initComponent:
edit:
AddOrgWindowUI = function(input) {
var m = input;
return Ext.extend(Ext.Window, {
title: 'form',
width: 400,
height: 198,
layout: 'form',
padding: 5,
initComponent: function() {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'parapapa',
anchor: '95%',
value: m,
emptyText: 'perapapa'
}
];
AddOrgWindowUI.superclass.initComponent.call(this);
}
});
}
Related
I just started with Extjs and I have few basic doubts.I have created a simple view(ScreenPropertiesPage) which has 1 select box and 1 custom view inside it. onchange of the select box value, view field is updated which is done in controller. I am done with creating view and controller which has listener for onchange select box value and updates associated view field.
But now the problem is : in my application I have to create 4 instances of ScreenPropertiesPage view and when onchange event is triggered from any views the textbox of 1st view is updated always. How to combine the event to specific view? What is the best procedure to combine controller and views and to reuse it(Even link to the documents from where I can learn controller view reusability is enough)? Any help is greatly appreciated.
Code skeleton for view:
Ext.define('Configurator.view.screenproperties.ScreenPropertiesPage', {
extend: 'Ext.container.Container',
alias: 'widget.screenpropertiespage',
requires: [
'Configurator.store.screenproperties.ScreenProperties'
],
autoScroll: true,
config: {
overLayMode: false
},
initComponent: function () {
var me = this;
this.items = [{
xtype: 'container',
componentCls: 'screenComboSelectorPanel',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'combo',
store: Ext.create(
'Configurator.store.screenproperties.ScreenProperties'
),
itemId: 'screenSelector',
margin: 3,
width: 400,
listConfig: {
maxHeight: 200
},
fieldLabel: 'Screen Name',
disabledCls: 'disabledBtn',
disabled: me.getOverLayMode(),
queryMode: 'local',
emptyText: '-SELECT-',
valueField: 'screenName',
displayField: 'screenName',
forceSelection: true,
selectOnTab: true,
autoSelect: true,
height: 25,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item comboContainer "><div class="rowExpanedrTextArea " style="">{screenName} </div>{[this.isExpandable(xkey,parent,values,xindex)]}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{screenName}',
'</tpl>'
)
}]
}, {
xtype: 'screenpropertieseditor',
itemId: 'messagesEditor',
margin: '25',
header: true,
frame: false,
border: true,
collectionName: 'messages',
title: 'Messages'
}]
me.callParent(arguments);
}
});
When user changes the value in combobox I want to update the screenpropertieseditor type view.
Controller for view :
Ext.define('Configurator.controller.ScreenProperties', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'screenPropertiesPage',
selector: 'screenpropertiespage'
}, {
ref: 'screenSelector',
selector: 'screenpropertiespage combobox[itemId=screenSelector]'
}, {
ref: 'screenPropertiesMessagesEditor',
selector: 'screenpropertieseditor[itemId=messagesEditor]'
}, {
ref: 'screenPropertiesPage',
selector: 'screenpropertiespage'
}],
init: function (application) {
var me = this;
this.control({
'screenpropertiespage combobox[itemId=screenSelector]': {
change: this.screenPropertiesPageStoreHandler
}
});
},
screenPropertiesPageStoreHandler: function (thisObj, eOpts) {
var messagesEditor = this.getScreenPropertiesMessagesEditor();
var screenSelector = this.getScreenSelector();
var screenSelected = screenSelector.getValue();
//Screen tile store first time loading handling
if (screenSelected === undefined) {
screenSelected = screenSelector.getStore().getAt(0).data.screenName;
}
var selectedRecord = screenSelector.getStore().findRecord(
'screenName',
screenSelected, 0, false, false, true);
if (selectedRecord != undefined) {
Ext.apply(messagesEditor, {
'screenName': screenSelected
});
try {
messagesEditor.bindStore(selectedRecord.messages());
} catch (e) {}
}
}
});
ScreenPropertiesPage will hava lot more extra fields along with this. I have to create multiple instances of ScreenPropertiesPage. screenPropertiesPageStoreHandler method of Configurator.controller.ScreenProperties will be triggered whenever value changes in the combobox of any ScreenPropertiesPage view. But since my ref and selector in controller are not proper it always refers to the first ScreenPropertiesPage view.
You need to know that Controller in Extjs is singleton.
But you can force Controller in your case ScreenProperties to handle multiple instances of views. This is done by firing events from particular view instance to Controller to handle more complex logic.
Before i throw an example you need to be aware that using refs with handling multiple instance of the same view is wrong because it uses this code(it is just a wrapper): Ext.ComponentQuery.query('yourComponent')[0]; So from your view instances pool it gets first.
So you need to get rid off refs in your controller since it does not work with multiple instance of the same view.
Alright, lets make this happen and implement good way to handle multiple instances of the same view/components.
In your view:
initComponent: function () {
var me = this;
this.items = [{
xtype: 'container',
componentCls: 'screenComboSelectorPanel',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'combo',
store: Ext.create(
'Configurator.store.screenproperties.ScreenProperties'
),
itemId: 'screenSelector',
margin: 3,
width: 400,
listConfig: {
maxHeight: 200
},
fieldLabel: 'Screen Name',
disabledCls: 'disabledBtn',
disabled: me.getOverLayMode(),
queryMode: 'local',
emptyText: '-SELECT-',
valueField: 'screenName',
displayField: 'screenName',
forceSelection: true,
selectOnTab: true,
autoSelect: true,
height: 25,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item comboContainer "><div class="rowExpanedrTextArea " style="">{screenName} </div>{[this.isExpandable(xkey,parent,values,xindex)]}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{screenName}',
'</tpl>'
),
listeners: {
change: function (cmp, newValue, oldValue) {
this.fireEvent('onCustomChange',cmp,newValue, oldValue)
},
scope: this
}
}]
}
In your Controller - ScreenProperties you need to listen on this event and handle particular instance of component in view:
init: function (application) {
var me = this;
this.listen({
// We are using Controller event domain here
controller: {
// This selector matches any originating Controller
'*': {
onCustomChange: 'onCustonChangeHandler'
}
}
});
},
onCustonChangeHandler: function(componentInstance, newValue, oldValue) {
//Your complex logic here.
//componentInstance is the instance of actual component in particular view
}
In this way you can handle multiple instances of the same view with one controller since every particular component that is created in your view is passed by event.
I've got an application that is heavy on field usage. I noticed that adding new fields can be fairly expensive, even when using suspend/resumelayouts. Observing the timeline in Chrome, I can see quite a lot of recalculation of styles and forced layouts (seems like one per fields) for the panel div.
The code below is a simple representation of what I'm doing.
util = {
createTextField: function(myItemId) {
return Ext.create('Ext.form.field.Text', {
fieldLabel: 'Field' + myItemId + ':',
name: 'field',
itemId: myItemId,
autofocus: true,
enableKeyEvents: true,
labelAlign: 'left',
labelWidth: 50,
labelStyle: 'font-size: 16px;',
width: 500
});
}
}
Ext.onReady(function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
for(i=0; i<100; i++)
{
Ext.suspendLayouts();
formPanel.add(util.createTextField(i));
Ext.resumeLayouts(true);
}
}
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
height: 600,
bodyPadding: 5,
autoScroll: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
}});
formPanel.render('form-ct');
});
The page itself is fairly straightforward:
<body>
<div id="form-ct"></div>
</body>
Right now pressing the button takes roughly ~2 seconds in Chrome and almost 4 in IE11. My question is whether this can be somehow optimized. Note that the fields must be rendered dynamically. I'm using ExtJS 4.1.
Start with moving suspendLayout/resumeLayout pair outside of the loop:
Ext.suspendLayouts();
for(i=0; i<100; i++)
{
formPanel.add(util.createTextField(i));
}
Ext.resumeLayouts(true);
Calling these inside the loop basically defeats the whole purpose of suspending layouts because you are forcing a relayout no less than 100 times in a row.
The add method is firing two events, add and beforeadd. You can instead using an array with components to add all at ones. Besides that you can use defaults and defaultType, but that will not do much I guess.
util = {
createTextField: function(myItemId) {
return Ext.create('Ext.form.field.Text', {
fieldLabel: 'Field' + myItemId + ':',
name: 'field' + myItemId // names are unique, we will use this to query components
});
}
}
Ext.onReady(function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
// array to hold all components
var components = new Array();
// optimize the for loop and introduce y
for(var i = 0, y = 100; i < y; i++)
components.push(util.createTextField(i));
// add all components at ones to prevent multiple events fired
Ext.suspendLayouts();
formPanel.add(components);
Ext.resumeLayouts(true);
}
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
height: 600,
bodyPadding: 5,
autoScroll: true,
// use defaultType and defaults to clean the code
defaultTypes: 'textfield',
defaults: {
autofocus: true,
enableKeyEvents: true, // this is heavy, consider if it is required
labelAlign: 'left',
labelWidth: 50,
labelStyle: 'font-size: 16px;',
width: 500
}
});
formPanel.render('form-ct');
});
I have a custom component (a grid), that i want to add to a panel, and then have a strip of components on the top.
All the examples on the internet look like this :
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
fieldLabel: 'Send To',
name: 'to',
anchor:'100%'
},{
fieldLabel: 'Subject',
name: 'subject',
anchor: '100%'
},
I want to add my own custom component, called myGrid. I would expect some kind property called component passing in the items, but I have no idea, because there is no documentation on what this 'items' array can be.
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
component : myGrid
anchor:'100%' // anchor width by percentage
}
You can use xtype to explicitly create already defined components.You can refer this fiddle : Demo
I solved my problem by nesting items in items, like so :
this.packageGrid = Ext.create('js.grid.PackageGrid', {
xtype: 'packageGrid',
// title: 'Packages',
width: '100%'
});
var extPanel = Ext.create('Ext.Panel', {
layout:'border',
bodyPadding: 5,
items:[{
region:'center'
,layout:'fit'
,border:false,
items:[
this.packageGrid
]
},{
region:'north'
,layout:'fit'
,border:false
,height:50
,collapsible:false,
items:[
button
]
}],
width: '979px',
height: '400px'
});
If I add a button to my panel via a 'renderTo' argument (See 'b' below), it works perfectly :
//create div in javascript
var extJSTest = document.createElement('div');
//append to main
mainPanel.appendChild(extJSTest);
//'get' panel through EXT (just adds a wrapper?)
var myDiv = Ext.get(extJSTest);
var b = Ext.create('Ext.Button', {
text: 'Click me!!!!',
renderTo: myDiv,
handler: function() {
alert('You clicked the button!')
}
});
However, if, I replace the 'b' with the following code (That is, i want to replace the button with a grid, connected up with a SimpleStore and some data)...
var myData = [
['Apple',29.89],
['Ext',83.81]
];
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'}
]
});
ds.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "Company", width: 120, dataIndex: 'company'},
{header: "Price", width: 90, dataIndex: 'price'}
],
renderTo: myDiv,
height: 180,
width: 900,
title: 'List of Packages'
});
I get this error :
Uncaught TypeError: Cannot read property 'dom' of null
Which is found at line 28211 in ext-all-debug. Code looks like this :
if (!me.container) {
me.container = Ext.get(me.el.dom.parentNode);
}
Anyone know what the issue is when i want to add a grid?
Also my index.html looks like this :
<script>
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
Ext.onReady (function () {
//application is built in here
});
</script>
Here's a fiddle :
https://fiddle.sencha.com/#fiddle/693
If I render to Ext.getBody() it works fine, but if i render to my own myDiv object it seems to have problems.
My solution to my question..
I am confusing renderTo with add.
I should create a panel, and use renderTo to put it somewhere on the DOM, and then later I can create a grid and then the panel can 'add' it.
Ext.onReady (function () {
var myDiv = Ext.create('Ext.Panel',{
renderTo:Ext.getBody(),
})
var myData = [
['Apple',29.89],
['Ext',83.81]
];
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'}
]
});
ds.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "Company", width: 120, dataIndex: 'company'},
{header: "Price", width: 90, dataIndex: 'price'}
],
height: 180,
width: 900,
title: 'List of Packages'
});
myDiv.add(grid);
//document.body.appendChild(myDiv);
});
I have few ExtJS components extended (Window,DataView etc) using Ext.extend method. I would like to add few additional properties to the extended. How do I add these into my component?
ExWindow = Ext.extend(Ext.Window,{
border:false,
initComponent: function() {
// Component Configuration...
var config = {
height: 500,
width: 500,
items: [{
xtype: 'simplepanel'
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
ExWindow.superclass.initComponent.apply(this, arguments);
},
onRender:function() {
ExWindow.superclass.onRender.apply(this, arguments);
}
});
ExWindow = Ext.extend(Ext.Window,{
border:false,
newPublicProperty: 0,
newPublicArray: new Array(),
initComponent: function() {
// Component Configuration...
var config = {
height: 500,
width: 500,
items: [{
xtype: 'simplepanel'
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
ExWindow.superclass.initComponent.apply(this, arguments);
},
onRender:function() {
ExWindow.superclass.onRender.apply(this, arguments);
},
newPublicMethod:function() {
}
});
newPublicProperty, newPublicArray, newPublicMethod - new additional properties of object.