I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);
Related
i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});
I am provided with built in extjs components classes.
I cannot change them as i am working on plugin.
I cannot override them as there are certain things which cannot be
predefined.
And also I want to change component for particular case, not all
cases.
Now If it will be possible that I pick that component from DOM,
change it any of property and render it there onwards. If it could
be done, then my work become lot easy.
Its completely a scenario. But still for ease in understanding, I am adding a sample code.
var tabPanel = Ext.create('Ext.tab.Panel', {
width : 300,
height : 200,
activeTab : 0,
items : [
{
title : 'Tab1',
bodyPadding : 10,
items : [
{
xtype : 'button',
text : 'B1'
}
]
},
{
title : 'Tab2',
items : [
{
xtype : 'button',
text : 'B2'
}
]
}
],
renderTo : Ext.getBody(),
autoRender : true
});
// Change title of tab panel
tabPanel.items.each(function(item) {
item.title = "text"+Math.random();
});
Now I want to remove this already rendered tab panel. And want to render it upon my choice wherever i want.
After lot of search, I find solution to problem. We can use doLayout() or update() function of component to fulfill purpose.
I am creating new ExtJs tabpanels and rendering panels inside it programmatically.
The panels (rendered inside tabs) are all written in separate JS files.
Opening, rendering and closing of the tabs is working completely fine.
But when I debug the code I see that the previous components of the closed tabs are still active in the memory. As a result of which the functioning of the components gets affected when the tab is reopened.
I want to destroy all the components inside the tab panels (if ExtJs, for some reasons, is not able to do it).
How can I do this?
Below is a sample code which I am trying:
Main Tab:
var tabs = new Ext.TabPanel({
id : 'screensTabPanel',
layout : 'fit',
enableTabScroll : true,
height : Ext.getBody().getStyleSize().height - 60,
activeTab : 0,
//enableTabScroll : true,
autoScroll : true,
autoRender : true,
border : false,
plugins : [ {
ptype : 'tabscrollermenu',
maxText : 30,
pageSize : 5
} ]
});
Dynamic Tab object:
var tabConfig = {
title : text,
bodyPadding : 3,
closeAction:'destroy',
autoScroll : true,
id : 'tab' + id,
closable : closable,
loader : {
loadMask : 'loading...',
autoLoad : true,
url : url,
scripts : true,
params : {
userId : 1
},
border : false,
appId : appIdx,
screenId : screenId,
gridType : gridType,
listeners : {
beforeclose : function(tab) {
debugger;
tab.removeAll(); //I tried doing this
tab.destroy(); //I tried doing this as well
return true;
}
}
};
Internal Panel code:
Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.panel.Panel',
itemId: 'qb-VisualSQLQueryBuilderId',
renderTo: Ext.Element.get('divQueryBuilder'),
layout: {
type: 'border'
},
listeners:{
beforerender: function(thisa, eOpts ){
debugger;
/*if(Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length > 1){
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[0].destroy();
}*/
Tab.MainTab = Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length - 1];
}
},
items: [ .... screen components ... ]
});
Add Panel object to tab:
addedTab = ExtCont.add(tabConfig);
addedTab.show();
ExtCont.setActiveTab(addedTab);
Now this is what happens:
Open Tab (Name - Query Builder)
Code reaches the beforerender listener.
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has only one object inside it.
Everything works fine.
Now the problem starts
Close the tab
Code reaches beforeclose listener. Trying tab.removeAll() and tab.destroy()
Reopen tab - Query Builder
Code reaches beforerender listener.
Now Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has two objects inside it. So it is retaining the object of the tab opened first time. And the second one is that of the tab opened just now.
How do I ensure whenever a tab is closed all its components get smoothly destroyed?
from TabPanel:
Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.
so it could really be an ExtJS Bug cause autoDestroy: true is default. maybe you could open a ticket.
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
Have question: I have in my database some filed with text (i submitted it through form).
Then I have extJS Panel where my data. I made, when i click on soem field, appears message Box with plain text only (But in my database this text is very beautiful with ul's, with /br/'s and so son) :( Its ok, but my eyes can't read this normally! How to avoid this? Maybe in extJS exists some replace params? replace('/n/', '//br/').. or?
my grid
var Grid = new Ext.grid.GridPanel({
id : 'grid',
store : store,
frame : true,
autoScroll :true,
columns : my_columns,
stripeRows : true,
title :'Answers',
iconCls : 'arrow',
listeners: {
celldblclick: function(Grid, rowIndex, cellIndex, e){
var rec = Grid.getStore().getAt(rowIndex);
var columnName = Grid.getColumnModel().getDataIndex(cellIndex);
Ext.Msg.show({
title : 'Message',
msg : rec.get(columnName),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});
Ext.Msg.getDialog().dd.lock();
}
}
});
Hard to understand your problem - you talk about a panel, then you post an example with grid.
Anyway... maybe the problem is that the message dialog window has preventBodyReset: false by default, which means that the default browser styles for <ul> and many other elements are reset.
Unfortunately there is no easy way to set preventBodyReset: true for the message box window. If you want it for all message boxes, then maybe you can achieve something with code like that:
Ext.MessageBox.getDialog().getEl().addClass('x-panel-reset');
If you don't want to apply it globally, then you probably have to create your own message window.
try using the escape function.
So something like:
Ext.Msg.show({
title : 'Message',
msg : escape(rec.get(columnName)),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});