How to implement vertical line and arrows altogether in Ext Tree?
I have created a fiddle by using both properties of useArrows and lines, but not getting applied at the same time.
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 200,
store: store,
rootVisible: true,
lines:true,
useArrows: true,
renderTo: Ext.getBody()
});
Fiddle
useArows and lines in tree is mutually exclusive properties
But you can use next hack - set useArrow and manually set linesCls, and override some css classes.
Look at my fiddle
As you can see in the source code for the Ext.tree.Panel ExtJs will not give the tree panel the lines CSS if the #cfg useArrows is true.
initComponent: function() {
var me = this,
cls = [me.treeCls],
store, autoTree, view;
if (me.useArrows) {
cls.push(me.arrowCls);
me.lines = false;
}
if (me.lines) {
cls.push(me.linesCls);
} else if (!me.useArrows) {
cls.push(me.noLinesCls);
}
....}
You have two options here in my opinion:
You override the initComponent method for this Ext.tree.Panel
You can override the css classes to implement the arrow-images
I made a Fiddle for the second case. This is what you wanted?
Related
I'm using a buffered store/infinite scrolling on a grid I defined in my view folder without defining a store.
var grid = Ext.define('MyApp.view.metadata.ResultGrid' ,{
extend : 'Ext.grid.Panel',
alias : 'widget.resultgrid',
id : 'mygrid',
//columns, etc.
I then instantiate it on Ext.application with
{ xtype: 'resultgrid', width: '85%', hidden: true}
Then, in my controller I create my store...
var store = Ext.create('Ext.data.Store', {
storeId : 'resultsetstore',
model : model,
buffered : true,
pageSize : itemsPerPage, //50
autoLoad : true,
leadingBufferZone : 100,
remoteSort : true,
//etc.
...then reconfigure my store to the grid within that controller:
Ext.getCmp('mygrid').reconfigure(store);
Ext.getCmp('mygrid').show();
With this method, the records get loaded to my grid, but those records get limited to the pageSize and I lose the infinite scrolling ability.
Everything works fine if I create a random grid right after I create my store within the Controller. However, I want to keep my grid defined in it's own folder and use xtype to create it in a specific location in my app (between a mess of panels/components).
This works:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
store : store,
This doesn't:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
//...
});
grid.reconfigure(store)
I can't use the first method within my grid definition because the store isn't defined until a User submits a search form.
Is there a way to keep my grid defined in it's own folder, use my store, and keep infinite scrolling functionality without putting everything into one giant file?
I instantiated my grid right after my store, then added it to the panel I wanted it in.
var app = Ext.getCmp('my_container');
app.add({
xtype: 'resultgrid', width: '85%', region: 'center', height: 400, collapsible: false, store: store
});
While using ExtJs border layout I want my East panel to be expandable & collapsible only by clicking on the panel's header, i.e. use floating characteristic. My queries are:
How do I remove the collapse button?
How do I remove floating animation? (animCollapse property seems to
work only on collapse & expand actions performed on the collapse
button)
Ext.require(['*']);
Ext.onReady(function() {
new Ext.container.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsed: true,
hideCollapseTool: true,
floatable: true,
width: 200,
title: 'Foo'
}, {
region: 'center'
}]
});
});
Prior to ExtJS 4.1.2 disabling the animation for floated panels was not possible.
Now, the animation will be disabled if animCollapse is set to 0.
Important!!!
The animCollapse property can be set to true, false, or the animation duration in milliseconds. However, if set to false it will still use the default animation time. It must be set to 0. I believe this is a bug and it's not yet fixed in 4.2.2
If you want to disable the animation but you are unable to update your project to ExtJS 4.1.2 or higher add the duration to the slideIn call in floatCollapsedPanel and to the slideOut call in slideOutFloatedPanel in the Ext.panel.Panel source code.
...
me.el.slideIn(slideDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.isSliding = false;
}
}
});
...
and
...
compEl.slideOut(collapseDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.slideOutFloatedPanelEnd();
// this would be in slideOutFloatedPanelEnd except that the only other
// caller removes this cls later
me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
me.isSliding = false;
}
}
});
...
See the 4.1.2 source code for Ext.panel.Panel: http://docs.sencha.com/extjs/4.1.2/source/Panel5.html#Ext-panel-Panel
Using ExtJs 4.1
Is there a way to query all floating components (windows, message boxes, etc.)?
My aim is to remove (destroy) all floating objects. It would be sufficient to "get" them on the first hand.
Well simply do it by using the Ext.WindowManager which is responsible for all floating components by default.
Following should work:
Ext.WindowManager.each(function(cmp) { cmp.destroy(); });
Here's a example JSFiddle:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}
}).show();
Ext.Function.defer(function(){Ext.WindowManager.each(function(cmp) { cmp.destroy(); })}, 5000);
For further reading on DOM-Query
Edit destroy only defined types
For that case go with the xtype of the component and check it.
Ext.WindowManager.each(function(cmp) { if (cmp.xtype === 'window') cmp.destroy(); });
I needed checkbox selection mode in my gridpanel, so i use Ext.selection.CheckboxModel component, but my problem is about the column (checkbox column) which this component will append to my grid. I want to set a fixed width for it, because this column's width may vary when i resize the browser window. I use the code below, but it doesn't work:
constructor: function() {
var me = this;
me.selModel = Ext.create('Ext.selection.CheckboxModel', {width: 16});
me.callParent(arguments);
}
This is code snippet and snapshot of my users table:
Ext.define('VDOA.view.users.Table', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.usersgrid',
forceFit: true,
selType: 'checkboxmodel',
//selType: 'rowmodel',
//selModel: Ext.create('Ext.selection.CheckboxModel'),
title: '',
initComponent: function() {
...
}
});
It's a bug in Ext 4.0.7:
It's the forceFit: true that screws up. They suggest to set flex:1 on the remaining columns. That worked for me but I would still like to see it smaller. I'll probably go for a css solution.
thread on the sencha forum
You should use combination of:
Set flex property to each column as VDP proposed
Define selModel with headerWidth as Rich Waters proposed
Having this combination you will be able to control exact width of cell with checkbox
There's an undocumented property that controls the column width, give this a shot:
selModel: {
selType: 'checkboxmodel',
headerWidth: 16
}
I think you're over-complicating things. Just add this line into your grid panel definition:
selType: 'checkboxmodel'
And you will get nice, fixed width, non resizable checkbox column in the front.
You try to put every thing inside the "initComponent function" .
initComponent: function () {
this.items = [{
//define grid view
selModel: Ext.create('Ext.selection.CheckboxModel'),
}
];
this.callParent(arguments);
}
I made the sufficient investigation of this problem. But unfortunately didn't find any solution, even in stackoverflow questions, that look like this one.
I need to redraw(refresh, re-render) a panel, that contains a tabPanel with different tabs, that are rebuilding each time when I open the panel. Here is the code below to build tabs
//the first tab
categoryTpl: function(){
var categoriesTab = new Ext.Panel({
id: '_Categories',
title: 'X-Axis',
layout: 'form',
padding: 10,
labelWidth: 101,
items: [...]
})
}
Here is code to build the TabPanel
setAxesInfo: function(){
var categoryTab = this.categoryTpl();
//initialize the controls in the first tab
FC.Var.CM.initAxis(categoryTab, undefined);
delete this.axesTabPan;
this.axesTabPan = new Ext.TabPanel({
activeTab: 0,
plain: true,
enableTabScroll: true,
autoScroll: false,
defaults: { autoScroll: true },
items: [categoryTab]
});
}
This is the code to build Panel
create: function(){
this.setAxesInfo();
this.axes = new Ext.Panel({
layout: 'fit',
border: false,
items: this.axesTabPan
});
return {
id: 'axesStep',
title: 'Series Customization',
items: this.axes
}
}
So, I make changes in tab controls and then I want to rebuild(refresh, re-render) my panel I click the button, which have the next handler
refreshAxes: function() {
this.axes.removeAll();
this.setAxesInfo();
this.axes.add(this.axesTabPan);
this.axes.doLayout();
}
So, in debugger I can see, that all my controls in the tab have default initial values (they were rebuilt as I see). But in the browser I see only the previous changed values. It's notable, that if I change the focus of my panel (for example switch to another panel) and then return to this panel all data have the default values. Why I don't see the default values without loosing focus?
I am using the Ext Js 3.4 (this version is the requirement). I'll appreciate any help. Thank you.
Try doing a doLayout() on the Panel.