I am new to extjs....
I am trying to add icons to the title bar of a window.
I am not able to figure out the error in my code
i tried using tools config for the window
Here is my code:
**Ext.ns('DEV');
DEV.ChartWindow = Ext.extend(Ext.ux.DEV.SampleDesktopWidget, {
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
initComponent : function() {
this.items = [
new Ext.Panel({
border:true,
html : '<iframe src="" width="100%" height="100%" ></iframe>'
})
];
DEV.ChartWindow.superclass.initComponent.apply(this, arguments);
},
getConfig : function() {
var x = DEV.ChartWindow.superclass.getConfig.apply(this, arguments);
x.xtype = 'DEV Sample Window';
return x;
},
tools: [{
id:'help',
type:'help',
handler: function(){},
qtip:'Help tool'
}]
});
Ext.reg('DEV Sample Window', DEV.ChartWindow);**
SampleDesktopWidget is an extension of Window
Can somebody help me with this
Thanks in advance
I believe title is part of the header. I dont think you can do this with initialConfig programmatically but you can either override part of component lifecycle or hook in with an event. E.g. add this to config. You might (probably) be able to hook in at any early stage after init maybe, but thats an experiment for you.
listeners: {
render: {
fn: function() {
this.header.insert(0,{
xtype: 'panel',
html: '<img src="/img/titleIcon1.gif"/>'
});
}
}
}
However for this particular scenario I would use iconCls
iconCls: 'myCssStyle'
Then include a CSS file with:
.myCssStyle {
padding-left: 25px;
background: url('/ima/titleIcon.gif') no-repeat;
}
This is a good example that might help, using extjs 3.2.1.
Adding tools dynamically
Related
Hi i have been using Extjs html editor.I want to customize the html editor like i have to display a customized alert box when we click button in toolbar.how can we do that?
thanks in advance.
Ext.define('MyApp.ux.MyOwnHtmlEditor',{
extend: 'Ext.form.field.HtmlEditor',
xtype: 'myhtmleditor',
getToolbarCfg: function() {
// get original toolbar:
var toolbar = this.callParent(arguments);
// add custom item:
toolbar.items.push({
xtype: 'button',
iconCls: 'x-fa fa-question-circle',
handler: function() {
Ext.Msg.alert('Dear user!', 'No, we won\'t help you!');
}
});
// Modify handler of existing button:
toolbar.items[3].handler = function() {
Ext.MessageBox.alert('Dear user!', 'If you want Italic, please go to Italy!');
};
// return toolbar to calling function
return toolbar;
}
})
And use it e.g. like this:
{
xtype: 'myhtmleditor'
}
Example fiddle
Good Morning All,
I have an ExtJS 5 tabpanel. When the tabpanel first appears there is a single tab inside with a star for the title. What I need is when the user clicks the star for it to create a new tabItem. I have tried the activate event but that only works with more than one tab present. I have also tried binding to the a click event and nothing happens for that. Here is the code I have now:
{
xtype:'tabpanel',
itemId:'tabCtr1',
width:785,
items:[
{ iconCls: 'btn-NewTab', html : 'A simple tab' }
]
}
function assetDetailsDialog_AfterRender(sender, eOpts)
{
parent.down('tabpanel').items.getAt(0).on('click', function(){
alert('Hello World');
});
}
Thanks everyone
Follow On Issue:
I am having one more issue with setting the active tab. When the button is click it creates the new tab not issue, but when I call setActiveTab it appears to do nothing. When I stepped through it in Chrome I can see it is actually changing the tab to the specified one but then switching it back to the original. Any help would be great. Any idea's?
I have created a fiddle which demonstrates how to add tabs dynamically on click, the code is also listed below in case the link breaks. In the code below, the significant thing is adding the listener to the tabConfig
Ext.application({
name: 'Fiddle',
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 800,
height: 400,
renderTo: document.body,
items: [{
title: 'Click me to add another tab',
tabConfig: {
listeners: {
click: function(tab) {
alert("Adding another tab");
var newTab = tabPanel.add({
// we use the tabs.items property to get the length of current items/tabs
title: 'Tab ' + (tabPanel.items.length + 1),
html: 'Another one'
});
}
}
}
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
}
});
Most of this code was taken from the documentation here
probably is a stupid question but i really don't know now, what i have to do to localize a button in a window i just redefined and create. I
use extjs 4.2.1 and i produce a kind of mvc but is more similar to the old way of use this type of framework.
I have to define a window that have two buttons 'submit' and 'close' like this:
Ext.define('newWindow',{
extend:'Ext.window.Window',
config: {
submitFn:function(){return null;}
}
bodyStyle: 'padding: 5px 5px 0',
layout:'fit',
width:460,
height:390,
plain: false,
border:false,
resizable: false,
buttons: [{
text:'submit',
handler: function(){this.up.up.submitFn()},
tabIndex:1000
},{
text: 'close',
handler: function(){
this.up().up().hide();},
tabIndex:1001
}]
})
When i create this window in my code i want to pass him a function to handler his behave but i can't..
i try to put him itemId, id but Ext.getCmp(id), Ext.ComponentQuery.query(id) doesn't do their job.
RE-EDIT:
OK the question isn't clear: I define in that way the components newWindow.
I say i don't use the mvc pattern and in a part of my program i create this component in like here;
var dlg = Ext.create('newWindow', {submitFn: submit});
Where submit is the function i need to call to submit the value present in the window, with her logic.
This is what i need to do but i ask all another way to do that.
You could always just set the window's config closable:true instead of defining your own button.
I assume all the ways you have tried to get a reference to the button didn't work because the button wasn't created when you called them. You should either wait for the button to be rendered when calling Ext.getCmp or use this.control in your controller init method. Here is an example:
Ext.define('myController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#submitButton': {
click: this.onSubmitButtonClick
}
});
},
onSubmitButtonClick: function() {
console.log('Click');
}
});
And here is a fiddle
How to create small button with icon inside textfield, like with datefield? In previous version of ExtJS there was a CompositeField but cant find it in ExtJS 4.
Just extend http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger You can change the icon of the trigger field with CSS and implement the behavior of clicking the icon in the onTriggerClick template method
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
// override onTriggerClick
onTriggerClick: function() {
Ext.Msg.alert('Status', 'You clicked my trigger!');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
renderTo: Ext.getBody(),
items:[{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'
}]
});
Is the icon clickable? If so, you are looking for Ext.form.field.Trigger. If not, you might try overriding the Text field's getSubTplMarkup() function to provide some custom dom.
For example:
Ext.define('MyField', {
extend: 'Ext.form.field.Text',
getSubTplMarkup: function() {
return this.callParent(arguments) + '<span class="my-icon"></span>';
}
});
Let's say I have a main controller, then my application has a controller for each "module". This main controller contains the viewport, then a header (with a menu) + a "centered" container, which is empty at the beginning.
A click in the menu will change the current module/controller and the adhoc view (which belongs to this controller) will be displayed in the centered container.
I think it's a very simple scenario, but strangely I didn't find the proper way to do it. Any ideas? Thanks a lot!
Here is what I do: I have a toolbar on top, a left navigation and the center location is work area (basically a tab panel) like you mentioned. Lets take each part fo the application and explain.First, here is how my viewport look like:
Ext.define('App.view.Viewport',{
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'App.view.menu.NavigationPane',
'App.view.CenterPane',
'App.view.menu.Toolbar'
],
initComponent: function() {
Ext.apply(this, {
items: [{
region: 'north',
xtype: 'panel',
height: 24,
tbar: Ext.create('App.view.menu.Toolbar')
},{
title: 'Navigation Pane',
region: 'west',
width: 200,
layout: 'fit',
collapsible: true,
collapsed: true,
items: Ext.create('App.view.menu.NavigationPane')
},{
region: 'center',
xtype: 'centerpane'
}]
});
this.callParent(arguments);
}
});
You can see that I have a toolbar (App.view.menu.Toolbar) with menu and left navigation (App.view.menu.NavigationPane). These two, components make up my main menu or gateway to other modules. Users select the menu item and appropriate module views (like form, grid, charts etc) get loaded into the 'centerpane'. The centerpane is nothing but a derived class of Ext.tab.Panel.
Like you said, I have a main controller that handles all the requests from the toolbar and navigation pane. It handled only the toolbar and navigation pane's click actions. Here is my AppController:
Ext.define('CRM.controller.AppController',{
extend: 'Ext.app.Controller',
init: function() {
this.control({
'apptoolbar button[action="actionA"]' : {
click : function(butt,evt) {
this.application.getController('Controller1').displayList();
}
},
.
. // Add all your toolbar actions & navigation pane's actions...
.
'apptoolbar button[action="actionB"]' : {
click : function(butt,evt) {
this.application.getController('Controller2').NewRequest();
}
}
});
}
});
Look at one of my button's handler. I get hold of the controller through the 'application' property:
this.application.getController('Controller2').NewRequest();
With the help of getController method, I get the instance of the controller and then call any method inside my controller. Now lets have a look at the skeleton of my module's controller:
Ext.define('CRM.controller.Controller2',{
extend: 'Ext.app.Controller',
refs: [
{ref:'cp',selector: 'centerpane'}, // reference to the center pane
// other references for the controller
],
views: ['c2.CreateForm','c2.EditForm','c2.SearchForm','c2.SearchForm'],
init: function() {
this.control({
'newform button[action="save"]' : {
// Do save action for new item
},
'editform button[action="save"]' : {
// update the record...
},
'c2gridx click' : {
// oh! an item was click in grid view
}
});
},
NewRequest: function() {
var view = Ext.widget('newform');
var cp = this.getCp(); // Get hold of the center pane...
cp.add(view);
cp.setActiveTab(view);
},
displayList: function() {
// Create grid view and display...
}
});
My module's controller have only the actions related to that module (a module's grid, forms etc). This should help you get started with rolling in right direction.
In main controller add child controller in the click event handler of menu
Ext.define('MyAPP.controller.MainController',{
...
init:function()
{
this.control({
'menulink':
{
click:this.populateCenterPanel
}
});
},
populateCenterPanel:function()
{
this.getController('ChildController');
}
});
In launch function add listener to controller add event like this -
Ext.application({
...
launch:function(){
this.controllers.addListener('add',this.newControllerAdded,this);
},
newControllerAdded:function(idx, ctrlr, token){
ctrlr.init();
}
});
Now put code for dynamically embedding views in the viewport in init method of ChildController.
Ext.define('MyAPP.controller.ChildController',{
...
refs: [
{ref:'displayPanel',selector:'panel[itemId=EmbedHere]'}
]
init:function(){
var panel=this.getDisplayPanel();
panel.removeAll();
panel.add({
xtype:'mycustomview',
flex:1,
autoHeight:true,
...
});
}
});
HTH :)