In my application i have many windows and panels and im using custom scrollbars. So for each window or panel i need to specify afterlayout listener to get the custom scroll bar
listeners:{
afterlayout: function(c){
fleXenv.fleXcrollMain(c.body.id);
}
}
So what im looking for is i need to add this listener globally for windows and panels so that by adding this code one time should effect on all windows or panels.
Is there any way to do this
It seems that your custom scrollbar is used in all Windows and Panels of your application. Hence there is nothing wrong with extending the core ExtJs classes IMHO.
Implement it as a 'feature' that is enabled by default but - for the rare cases where you don't want the scrollbar - can be disabled.
Ext.define('patch.Ext.panel.Panel-scrollbar', {
override: 'Ext.panel.Panel',
enableCustomScrollbar: true,
afterLayout: function() {
this.fixScrollbar();
this.callParent(arguments);
},
fixScrollbar: function() {
if(this.enableCustomScrollbar) {
// your code
}
}
});
Load with Ext.require('patch.Ext.panel.Panel-scrollbar') or add it as dependency (requires) to your application definition.
Ext.window.Window extends from Ext.panel.Panel, hence it will inherit the behavior.
You can make your own panel and window extending ExtJS default components. You can define desired listener, set up xtypes and then use these modified components in your application.
Another solution would be to override existing Ext.panel.Panel and Ext.window.Window with Ext.override
IMHO, I think the best way to do this is to define your personal Window/Panel class. Yes, one way is to use Ext.override function but I don't think it's a good idea.
I suggest you to do this:
Ext.define ('MyCustomWindow', {
extend: 'Ext.window.Window' ,
listeners: {
afterlayout: function (win) {
fleXenv.fleXcrollMain (win.body.id);
}
}
}
Ext.define ('MyCustomPanel', {
extend: 'Ext.panel.Panel' ,
listeners: {
afterlayout: function (panel) {
fleXenv.fleXcrollMain (panel.body.id);
}
}
}
Now, you can instantiate MyCustomWindow and MyCustomPanel, leaving Ext.window.Window and Ext.panel.Panel unchanged.
Another way is to use WindowManager and PanelManager (this one defined by yourself):
Ext.WindowManager.register (window1);
Ext.WindowManager.register (window2);
Ext.WindowManager.register (window3);
Ext.WindowManager.each (function (win) {
win.on ('afterlayout', function (window) {
fleXenv.fleXcrollMain (window.body.id);
});
});
In this case, first you have to instantiate your windows and panels, register them to their managers and then invoke the each function as I did in the example above.
Related
I've been thinking about this problem for a while, and I can't seem to come up with a reasonable solution. What I would like to do is create getters/setters for a textfield/its value in my view. I realize that the preferred Ext JS way is using a reference within the controller and getting it that way, but that doesn't feel very object-oriented to me. I'd also have to wrap these getters and setters because I want to output a message if the getter returns undefined. What I'd like to do is create my own getters/setters or somehow override the default getters/setters. Here are some ways I was thinking of accomplishing this.
I was thinking I could use the config {}, but that appears to only work for variables I want to define. I then was thinking of using an id somehow, but the community seems split on whether that's a good practice or not. Which leads to my current solution... wrapping. Here's my code:
LoginWindow
Ext.define('MyApp.view.LoginWindow', {
extend: 'Ext.window.Window',
alias: 'widget.loginWindow',
autoShow: true,
closable: false,
border: 0,
plain: true,
allowBlank: false,
title: "Enter your username",
modal: true,
config: {
buttons: [{
text: "Ok"
}],
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
id: 'loginUserInput',
name: 'loginUserInput',
msgTarget: 'under',
validator: function(value) {
if (Ext.isEmpty(value)) {
return "You need to enter a username.";
}
return true;
}
}]
},
constructor: function(config) {
this.callParent(config);
},
getButton: function() {
console.log('here');
}
});
MyController
Ext.define('MyApp.controller.Chat', {
extend: 'Ext.app.Controller',
requires: [
'Views.ChatModule.view.LoginWindow'
],
refs: [{
ref: 'loginWindow',
selector: 'loginWindow',
xtype: 'loginWindow',
autoCreate: true
}, {
ref: 'loginUserInput',
selector: '#loginUserInput'
}],
init: function() {
// The events controller oversees
this.control({
'loginWindow button[text="Ok"]': {
'click': this.onSubmitLoginWindow
}
});
},
getLoginUserInputValue: function() {
var loginUserInput = this.getLoginUserInput();
if (loginUserInput) {
var username = loginUserInput.getValue();
if (username) {
console.log(username);
} else {
console.warn("username is undefined");
}
}
console.warn("loginUserInput is undefined");
},
onSubmitLoginWindow: function(button, event, eOpts) {
this.getLoginUserInputValue();
}
});
This works, and I realize it's a very nit-picky thing, but it just doesn't feel right to have the getter in the controller. I feel like it'd be more object-oriented if it was in the Window. However, if I put it in the Window, I believe my only option is to lean on ids or manually create the textfield in the Window's initComponent--which would involve saving off a reference of the textfield in there, but that seems a bit inefficient... as I would have to make a call to doLayout as well.
Just to reiterate, I'd love to have the getters/setters in the Window, and I'm looking for a quick way to reference it, similar to how the controller references objects. I believe the main answer will be to use ids and making a call to Ext.ComponentQuery.query('#loginUserInput') in the Window, but I'd like to know if there were any better approaches out there... like overriding the auto generated getters/setters or adding a simple getter/setter for an input's value.
Cross-post from the Sencha forums.
Edit
I guess I was a bit unclear with what I want. As a more general statement, instead of jamming all things related to my view in the controller, I'd like to store it all in the view itself, which includes things like getters/setters. One of these getters/setters just so happens to be the loginUserInput getter.
Using a model is an interesting idea, but I feel like that would be a whole lot of overhead for singleton values. I'm basically looking for something like Java's setters/getters in the LoginWindow view... and hopefully something as simple as (or close to) Java's.
The idea of including (encapsulating) it in the view makes the controller a bit cleaner, and if I delete the view, I'm deleting its functions as well, so I don't have to go hunting for the functions in the controller... all I have to worry about is removing the references (which should be minimal).
I think that the "OO" way that you're looking is to work with a Ext.data.Model for your form. If you look at the Ext.form.Basic you have methods to manipulate a model (called record) and also get the object with the values of your view. So you need:
When you create your form, use loadRecord() to bind your form to a Model.
At any time you need, use getValues() to retrieve the values of your form fields.
When submiting your form, use getRecord() and getValues() to sync your record.
Ext.define('MyApp.model.Login',{
fields : [{
name: 'username',
type: 'string'
},{
name: 'password',
type: 'string'
}]
});
Ext.define('MyApp.controller.Login',{
...
refs : [{
selector: 'window form',
ref: 'formPanel'
}],
...
openForm : function() {
//load your form and then bind the new record
var formPanel = this.getFormPanel(), //Ext.form.Panel
form = formPanel.getForm(); //Ext.form.Basic
form.loadRecord(Ext.create('MyApp.model.Login'));
},
save : function() {
//get the values in the view
var form = this.getFormPanel().getForm(),
vals = form.getValues(),
record = form.getRecord();
console.log(vals); //see the object representation of your view here
record.set(vals); //update your model
//do whatever you need with your model
}
...
});
This is an good example when you need to save the form data. In the login I think you can work directly with getValues() without binding it to a Ext.data.Model.
I am not quite certain what problem you are trying to solve to be honest with you.
If you do not like controllers listening to buttons within your window, you can have button handlers witin your view definition fire custom events that controllers can listen on. Use fireEvent method. And by the way initConfig is a recommended way to setup your views. You can break it up into methods if you wish, 'this' reference is available and is the View component being instantiated.
If you need to find inner components within the View there are many methods available from up /down to nextSibling and query .
For Components:
• Ext.getCmp(id)
• Ext.ComponentQuery.query()
• up()
• down()
• nextSibling()
• previousSibling()
• child()
• previousNode()
plus various find.. Methods
EDIT
I think I understood what you mean by getter and setters. Ext forms have the fields finders to make it easy to get and set data to individual fields. See these SO questions: Best way to access adjacent components / fields and EXT.JS getting a list of items from a fieldset
Also like Sergio said there is getRecord getValues and setRecord methods on the form to deal with data binding. Thats it.
EDIT2
The best starting point guide that shows clear and claen MVC patterns as well as form handling. http://docs.sencha.com/extjs/4.1.3/#!/guide/application_architecture
My thoughts are something like this:
...
items: [],
constructor: function(config) {
this.loginUserInput = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Username',
id: 'loginUserInput',
name: 'loginUserInput',
msgTarget: 'under',
validator: function(value) {
if (Ext.isEmpty(value)) {
return "You need to enter a username.";
}
return true;
}
});
this.items.push(this.loginUserInput);
this.callParent(config);
},
getLoginUserInput: function() {
var loginUserInput = this.loginUserInput;
if (!loginUserInput) {
console.warn("LoginWindow::getLoginUserInput: loginUserInput is undefined");
}
return loginUserInput;
}
So instead of letting Ext do its magic, I am now instantiating the object on my own, which then allows me to store away a reference of it, so I can easily access it in my getter. I just wonder if this is creating any sort of performance hit. It doesn't seem like it'd be that much worse... it actually seems like it'd be a bit better because I'm not referencing this object by its ID, and I don't have to go searching for it when I need it.
I'm trying to achieve something fairly simple: use a controller to attach an event to a specific control, but am struggling to represent this using Sencha Architect.
I have a button named "Login-Button-Login".
In my controller, if I have the code:
config: {
control: {
"button": {
tap: 'onButtonTap'
}
}
},
onButtonTap: function(button, e, eOpts) {
Ext.Msg.alert("onButtonTap fired");
},
The the button works as expected. This is fine, but obviously it will apply to all buttons. I add a reference to "Login-Button-Login" (not my choice of name!):
config: {
refs: {
loginButtonTap: 'Login-Button-Login'
},
control: {
"button": {
tap: 'onButtonTap'
},
"Login-Button-Login": {
tap: 'onButtonTap2'
}
}
},
But how can I now use the reference "loginButtonTap" as an item in the control object? Whatever I try using the Sencha Architect controls I just end up with "Login-Button-Login" being referenced directly.
Relatedly, how can I link this controller to the "Login" view which contains the button? Surely I don't need to use full selectors for each reference? Clearly even if I could make this work, it currently would not function as Login-Button-Login needs to reference the "Login" view.
Just use an id (or itemId) of the control as the value of the controlQuery in event handler config:
config: {
control: {
"#btnWhatever": {
tap: 'onWhateverTap'
},
}
I prefer to use this method of attaching events to elements, since I am too lazy to do double work - specify the reference to the button, and then specify that reference in event handlers controlQuery. onWhateverTap gets the reference to the button as an argument and most of the time you do not need that reference anywhere else.
I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?
I have looked into the documentation and also done a good search but nothing seems to answer my question.
Specify a custom type config on your tools:
Ext.create('Ext.grid.Panel', {
...
tools: [
{
type: 'enable-grouping',
handler: function() {
...
}
},
{
type: 'disable-grouping',
handler: function() {
...
}
}
]
});
Then define the following classes in a stylesheet to style your new tools:
.x-tool-enable-grouping {
background-image: url('path/to/tool/image/enable-grouping.png');
}
.x-tool-disable-grouping {
background-image: url('path/to/tool/image/disable-grouping.png');
}
The size of a tool image should be 15 x 15 px
I wanto to add a tool (search, help, gear, ...) in a window dynamically, like this:
http://www.rahulsingla.com/sites/default/files/content/blog/extjs/extjs-panel-add-tool.htm
And I need to create more than one instance of UIMyWindow at the same time.
However, I'm using Ext Designer which generates 2 files:
MyWindow.ui.js: class declaration.
MyWindow.js: methods implementation.
Besides Ext Designer hasn't an option Tools at design time (I didn't find).
I was adding the tool outside MyWindow.js and MyWindow.ui.js, like this:
var winMyWindow = new UIMyWindow({
autoShow: 'true',
tools: [{
type:'gear',
handler: function(){
// Some code...
}
}]
});
But I want to put this block inside MyWindow.js. So, I did this:
UIMyWindow = Ext.extend(UIMyWindowUi, {
tools: [{
type:'gear',
handler: function(){
// Some code...
}
}],
initComponent: function() {
UImenuDock.superclass.initComponent.call(this);
If you ask me "Why not to put this code inside MyWindow.ui.js?", I would answer "because I don't want to put this code manually every time I make changes in the design file (Ext Designer)".
Well, if I open one window, it's seems work ok, but if I open a second at the same time, the tools are duplicated in the second window...
So, any idea how to add tools dynamically in MyWindow.js in this specific case?
put 'tools' into initComponent
UIMyWindow = Ext.extend(UIMyWindowUi, {
initComponent: function() {
this.tools = [{
type:'gear',
handler: function(){
// Some code...
}
}],
UImenuDock.superclass.initComponent.call(this);
can somebody help me with how to extend extjs components using extjs version 4. I am looking for a proper syntax for the same. please help..!!
Following is an example code of extending textfield in ExtJS 4.
Other then using the existing configs and methods, this extended component also has a new config property created and a new method created & associated with an event.
The purpose of component is simple that it displays the label in red color if the value is mandatory, modifies the background color of the field if its readOnly and also changes the background color of the field when focussed.
The code is properly commented. Hope it helps.
Ext.define('Ext.pnc.Textfield', {
extend: 'Ext.form.field.Text',//Extending the TextField
alias: 'widget.pnctextfield',//Defining the xtype
config:{
focusCls:'focusClassFieldPnC',//Providing value for existing config property.
testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine
},
constructor:function(cnfg){
this.callParent(arguments);//Calling the parent class constructor
this.initConfig(cnfg);//Initializing the component
this.on('beforerender',this.beforeRender);//Associating a new defined method with an event
},
//Defining a method below and associating this with an event in the constructor above
beforeRender:function(){
if(!this.allowBlank){
this.labelStyle = 'color:#FF0000';
}
if(this.readOnly){
this.fieldCls = 'readOnlyClass';
}
},
//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class
afterRender:function(){
console.log('after render function');
this.callParent();//Calling the parent class method. This can be omitted if not required and is not a must
}
});
.readOnlyClass{
background:#FF0000 !important
}
.focusClassFieldPnC{
background:#00ff00 !important
}
Ext.define('myApp.Grid', {
extend: 'Ext.Grid',
alias: 'widget.mygrid'
....
....
}
now you can use xtype:'mygrid'
Ext.define('BS.view.MyGrid' , {
extend: 'Ext.grid.Panel',
alias: 'widget.my-grid',
// Non-complex config types (booleans, integers, strings) go here
width: 1000,
autoHeight: true
initComponent: function() {
Ext.apply(this, {
// complex configs (objects / arrays) go here
columns: colModel,
});
this.callParent(arguments);
}
});
why not see the src of extjs4's components such as Grid,Table ...
and here are docs:
http://docs.sencha.com/ext-js/4-0/#/guide/components <== important
http://docs.sencha.com/ext-js/4-0/#/guide/class_system
Ext.define('My.custom.Component', {
extend: 'Ext.Component'
});