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(); });
Related
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?
I want to write a proof-of-concept app along these lines:
View
- a URL text input field at top with Go button
- a big DIV underneath consisting of the rest of the view
Controller
- upon Go pressed, validate the URL text
- set up the URL to the data source
- read data from the data source
- create a nested DIV element for each data, apply CSS rules
- add the element to the big DIV
Model
- define the fields
- define the default ordering
CSS
- define the styles
First, does what I have written above work within ExtJS or will I be fighting the framework? In particular, inserting plain HTML as element nodes.
Second, does anyone know of an existing project under GPL which could act as starting point? So far what I've seen are flashy examples with URLs hard-coded and set to auto-load.
There's nothing scary or otherwise disturbing in what you've written.
Although not much advertised, ExtJS handles custom HTML & CSS pretty well. You can set some using the html or tpl config options. The latter is powered by XTemplates, so you can do loops, etc. When using these options and/or custom CSS, Ext will calculate its layouts around the rendered result, accounting for your custom style automatically. Now, in practice, that's a whole lot of work for the framework, and it doesn't always work as expected, and it won't work at all on some browsers (like not so old IE, of course). One big pitfall you should be aware of is that you should always use integer value in px for your CSS, since if a dimension resolve to a decimal value in px, Ext will choke on that.
That said, since you're apparently going to back your data with a model, you should probably use a dataview. That's a component that let you use custom HTML over a regular Ext store. It then provides goodies for item selection, paging, etc. It's the base class of other advanced data views, like Ext grids.
Regarding URLs, you don't necessarily have to hardcode them in the model's proxy (or elsewhere). You can pass an URL to an existing store's load method (as documented here).
Finally, I don't know of existing projects, but your POC is really straightforward, so here's a fiddle to get you started. The code is not 100% clean, in particular defining everything in a single file, and thus missing all the requires... But it illustrates most of the points you've asked about. Read the docs about the components / methods that are used to learn how to go beyond this.
Here's the fiddle's code:
Ext.define('Foo.model.Item', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.define('Foo.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onGo: function() {
var view = this.getView(),
url = view.down('textfield').getValue(),
dataview = view.down('dataview'),
store = dataview.getStore();
if (this.isValidUrl(url)) {
store.load({url: url});
} else {
Ext.Msg.alert(
"Invalid URL",
"This URL cannot be loaded here: " + url
);
}
},
// private
isValidUrl: function(url) {
return ['data1.json', 'data2.json'].indexOf(url) !== -1;
}
});
Ext.define('Foo.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
controller: 'main',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'hbox',
margin: 3,
defaults: {
margin: 3
},
items: [{
flex: 1,
xtype: 'textfield',
emptyText: "Valid inputs are 'data1.json' or 'data2.json'",
listeners: {
specialkey: function(field, e) {
if (e.getKey() === e.ENTER) {
// custom event, for the fun of it
field.fireEvent('enterkey', field, e);
}
},
// the custom can be bound to controller in "modern ext" way
enterkey: 'onGo'
}
},{
xtype: 'button',
text: "Go",
handler: 'onGo'
}]
},{
flex: 1,
xtype: 'dataview',
margin: '0 6 6 6',
cls: 'my-dataview', // for CSS styling
store: {
model: 'Foo.model.Item',
autoLoad: false
// default proxy is ajax and default reader is json,
// which is cool for us
},
tpl: '<tpl for=".">' + '<div class="item">{name}</div>' + '</tpl>',
itemSelector: '.item'
}]
});
Ext.application({
name : 'Foo',
mainView: 'Foo.view.Main'
});
Some CSS for the data view:
.my-dataview .item {
padding: 1em;
border: 1px solid cyan;
color: magenta;
float: left;
margin: 6px;
width: 100px;
}
And an example JSON response (this is the bare minimum to be functional... read about proxies & reader to go further):
[{
name: 'Foo'
},{
name: 'Bar'
},{
name: 'Baz'
}]
Is there a way to define a window as unique ?
What I mean exactly is: when the window is already open, I want it to get focus, instead of opening it again.
For now my menu click event just does:
onMenuItemClick: function(){
Ext.create('Mb.view.UniqueWindow').show()
},
Give it a unique id, then verify if it already exists before creating it, otherwise just show it, something like
function onMenuItemClick() {
var wnd = Ext.getCmp('myUniqueWindow');
if (!wnd) {
wnd = Ext.create('Ext.window.Window', {
id: 'myUniqueWindow',
title: 'Unique Window',
height: 200,
width: 400,
layout: 'fit',
closeAction: 'hide', // This is really important otherwise closing it will destroy the window!
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{
header: 'Hello World'
}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}
});
} else {
wnd.getEl().highlight()
}
wnd.show();
}
You can see a working sample here
Save a reference to it:
if (!MyApp.someWin) {
MyApp.someWin = new Ext.window.Window();
}
MyApp.someWin.show();
I have used the following to add content to my view:
Ext.getCmp('mainpage').add({items:thecarousel});
thecarousel is an array representing my carousel and its content. This all works as I require it to. Here's the code for it:
var thecarousel = {
xtype: 'carousel',
width: '100%',
height: '100%',
itemId: 'thecarousel',
id: 'carousel',
defaults: {
styleHtmlContent:true,
},
items: allcharts,
}
Ext.getCmp('mainpage').add({items:thecarousel});
Ext.Viewport.setMasked(false);// remove loading message`
What I am looking for is an method to do the opposite of this and remove the carousel from the view.`
I have unsuccessfully tried the following:
Ext.getCmp('mainpage').remove('carousel',false)
Ext.getCmp('mainpage').remove({items:'carousel'})
Ext.getCmp('mainpage').remove('carousel',true)
If you are using id: 'carousel', you can do that like this:
Ext.getCmp('mainpage').remove(Ext.getCmp('carousel'))
You could also do it using a component query:
var main = Ext.getCmp('mainpanel');
main.remove(main.down('#carousel'));//added missing closing brackets
//OR, if there is only one component of xtype 'carousel' on your mainpanel:
main.remove(main.down('carousel'));
I personally would avoid using IDs and go with the second method (you could give the carousel an itemId: 'carousel' and still use main.remove(main.down('#carousel')) if you want).
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.