I have a grid:
var koord_tab = new Ext.grid.EditorGridPanel({
title:"Координаты",
store: datastore,
region: 'center',
cm: cm_koord,
//height: 300,
autoScroll: true,
//bbar:[saveButton,cancelButton,editButton]
})
I have a window with tabpanel:
var x = new Ext.Window({
title:'Аттрибуты',
//height:390,
//autoWidth:true,
//autoHeight:true,
//autoScroll:true,
width:400,
listeners:{
'beforeclose':function(){
//app.mapPanel.map.removeLayer(myVecLayer);
for(var i=0;i<ppp.length;i++){
ppp[i].deactivate();
}
counter=0;
}
},items:[{
xtype:'tabpanel',
activeItem:0,
//autoScroll: true,
enableTabScroll : true,
//autoHeight:true,
height:340,
//collapseMode: "mini",
bbar:[saveButton,cancelButton,editButton],
items:[ed_tab,koord_tab]
}]
})
x.show();
Question: how to make tabpanel scrollable? When I open the window, I see this:
But when I resize the window, I see this:
You can see the toolbar doesn't show up. How can I make that toolbar always show, even if the window was resized?
UPDATE
I see only way to put bbar from tabpanel to window. But there is another problem: how to tabpanel and window unscrollable to have only one grid's scrollbar?
You're right to add the toolbar to the tabpanel.
For the other problem: get rid of the height: 340 config on your tabpanel and give it a layout: 'fit' config.
Then add another layout: 'fit' config on your gridpanel.
That should handle it.
Here is the fit layout in the ExtJS3 docs.
Related
My requirement is that I need one container with "X" in top right corner of container. On click of X the container should get disappear. Logic is not a problem for me.I want a container with "X" on top right.
Here is what I am trying
var myBtn =Ext.create('Ext.Button', {
text: 'x',
handler: function() {
/*this.container.component.removeAll();
this.container.component.updateLayout();*/
}
});
myFields.push(me.getField(selectedRecord));
myFields.push(btn);
me.add({
xtype: 'container',
margin: '0 6',
draggable: true,
reorderable: true,
height: 50,
items: dropField,
listeners: {
render: function() {
new Ext.dd.DragDrop(this.body, "myGrp");
}
}
});
in `getField` method I am getting "textfield component". Can anybody help me to get that closable container. I am trying with panel but there I am getting only "X". textfield component is missing.
Try to use panel component with closable property
I am using version 4.2.
I currently have a view which extends a panel. On this panel there is a button which displays a modal window. The controller code when the button is clicked is below (which I pulled from the extjs docs):
displaySearch : function(btn) {
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
modal : true,
items: {
...
}
}).show();
}
I want a View I already have created to be rendered INSIDE the modal window I just defined.
How do I do that?
If you have defined an alias (xtype) for that view, let's say it is 'myview', then you just add it to items like this:
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
autoShow:true,
layout: 'fit',
modal : true,
items: [{
xtype:'myview'
}]
});
Also, you don't need to call show() on the created window, it is enough if you configure autoShow:true.
I have the following code which creates a tab inside of a tabpanel:
id: 'tabs',
region: 'center',
xtype: 'tabpanel',
autoDestroy: false,
items:[{
xtype: 'country-rate-grid',
id: 'LegalCompliance',
title: 'Legal Compliance',
store: 'RateManagement.store.LegalRateStore',
hidden: true,
closable: true,
listeners: {
'close': function(tab, eOpts) {
tab.hide();
}
}
}
When I close the tab via the X button, and then try to re-open it via tabs.child('#'+record.data.id).tab.show();, I get this error in the console:
Uncaught TypeError: Cannot read property 'tab' of null
It looks like it is deleting the tab instead of hiding it. How can I just show and hide my tabs instead of deleting them from the DOM when someone clicks the close button on the tab?
Quoting Ext JS 4.2.2 docs:
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.
EDIT: Ok, now I think I get what you're trying to do and where it went wrong. I've looked up the code and it looks like autoDestroy: false does not in fact destroy a container's child, but it detaches that child from the document body and removes it from the container's children collection. That's why you're seeing it disappearing from the DOM. The DOM nodes are not lost however, and are appended to the detached body element that is available through Ext.getDetachedBody(). That's also why you can't refer to the component by calling tabs.child(blah) - the tab has been removed from there.
So if you're trying to kind of hide a tab panel upon closing, to be able to show it again, you'd have to re-insert it back into the tab panel:
Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
renderTo: document.body,
width: 300,
height: 200,
autoDestroy: false,
items: [{
id: 'foo',
title: 'Foo',
closable: true,
html: 'foo bar'
}, {
id: 'bar',
title: 'bar',
closable: false,
items: [{
xtype: 'button',
text: 'Bring foo back!',
handler: function() {
var foo = Ext.getCmp('foo');
foo.ensureAttachedToBody();
tabs.insert(foo);
}
}]
}]
});
});
foo.ensureAttachedToBody() will re-attach the DOM nodes for that panel back to the document body, and then we insert it into the tab panel as if nothing had happened. Voila.
I added a loadmask to a panel and I want the spinner to be displayed each time stores associated with the loadmask are loaded. The panel is a large tooltip and the stores are loaded each time a point is visited in a line chart. Thus, when I hover over a point, I'm expecting a load message to appear for a short period of time before I see the contents in the panel. What I'm getting is an empty panel however. If I remove the code that I have which adds the load mask (the initComponent function), it works (without the load message though). How would I use the loadmask in this manner as opposed to explicitly calling the setLoading() method for each panel?
Here's the code:
tips:
{
...
items:{
xtype: 'panel',
initComponent: function(){
var loadMask = new Ext.LoadMask(this, {
store: Ext.getStore('CompanyContext')
});
},
id: 'bar-tip-panel',
width: 700,
height: 700,
layout: {
type: 'accordion',
align : 'stretch',
padding: '5 5 5 5'
},
items:...
}
}
config object isn't the proper place to override initComponent method. What you should do is to define a subclass of Panel, and override the method there.
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
initComponent: function() {
this.callParent(arguments); // MUST call parent's method
var loadMask = new Ext.LoadMask(this, {
store: ...
});
},
});
Then, you can use xtype mypanel in your tips configuration.
I have a GridPanel in Extjs and i just want to remove or hide its header toolbar. (The toolbar where the title and the searchbox is in). I just want the Gridpanels first element to be the column headers. How can I do it?
hideHeaders property of Ext.grid.GridPanel does the trick.
var grid = new.Ext.grid.GridPanel({
store: store,
hideHeaders: true,
width: 200,
height: 100,
}
Have you tried setting the header config option to false? See below example:
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
header: false,
renderTo: 'mygrid',
width: 600,
height: 300
});
If you can't find a suitable config option, calling gridPanel.getTopToolbar().hide() afterwards should do the trick.