How can I get a list of items from a Ext.form.Fieldset? I'm trying to find a component based on one of its properties, this is what I've got so far:
Ext.each(container.items, function (component) {
if (component.name == config.name) {
component.doUpdate(config);
}
}, me);
Of course, items is undefined...so what can I do to access the components contained in my container, which is a fieldset?
You can use container.down(selector) or if its a form field use form.findField(name).
See this answer on the different ways to 'find' things in an extjs app:
Testing extjs apps
For form fields here is an answer that lists different tricks: Best way to access adjacent components / fields
EDIT: Use container.query(selector) method to get an array of objects. As down() method returns first found.
Related
I'm using casperJS to capture a portion of the screen using casptureSelector method with the code below:
this.waitForSelector(config.selector, function () {
this.then(function() {
this.captureSelector(config.imageFileName, config.selector);
});
});
it is possible to pass #someId for an an id selector and .someClass for a class selector.
But how can I pass multiple classes selector like .someClass.otherClass ?
I tried many variations but I'm unable to make it work.
I believe you can you any valid css selector so for multiple classes select you just separate the string with a comma:
'.firstSelector, .secondSelector'
You can't path an array but you can dynamically build with Array.join a string of comma separated classes
EDIT
I believe this would work only if the selection results in a single DOM element . If you drill into the code, the selector is used to find the capture bounds and adjust zoom., an inner method for calculating the bounds calls findOne with the selector, so I guess (without really digging into findOne method that it would return the first element if a query results in multiple DOM elements.
I'm using a chart to render a piechart for my app. I have:
Ext.query('.highcharts-container')
that gives me an array of highchart-containers and I'd like to add a custom class to every one of them to add some custom css. I tried:
Ext.query('.highcharts-container').addCls("test")
but says "addCls" is not a function.
below is the img of how it looks:
and accord to the answers below, i tried adding it in seperate app, and it works, but for some reason in this case it constant shows undefined.no clue whts going on?
Ext.query returns an array. Instead, use Ext.select which returns a CompositeElement. It lets you run Ext.dom.Element methods on a group of elements:
Ext.select('.highcharts-container').addCls("test");
Ext.query will return an array of matching components. If you're sure there will always be exactly 1 item in the array, you can use:
Ext.ComponentQuery.query('.highcharts-container')[0].addCls("test")
Otherwise, you should loop through the items and add the class to each component.
Ext.ComponentQuery.query('.highcharts-container').forEach(function (item) {
item.addCls("test");
});
I am working on a project in ExtJS 4.2 written in the MVC pattern. I need a reference to a specific item inside MyViewport (extended from the class Ext.container.Viewport). The item which needs to be referenced from within the controller has the Class MyPanel (extended from "Ext.Panel"). Problem is there are several items with the same class, so simply doing a standart ExtJs-component-query like,
//inside myController.js
refs: [
...
{ref: 'specificItem', selector: 'MyViewport_alias > myPanel_alias'},
...
]
wont get me a reference to the item. Thats why i thought of retrieving the reference by something like this, since the items using MyPanel-class have a property title:
//inside myController.js
refs: [
...
{ref: 'specificItem',
selector: 'MyViewport_alias > myPanel_alias > title="title of specific item"'},
...
]
But i coulnd't find any examples on retrieving items as references by using their properties as parts of the component query other than this.
Has someone experience with this kind of problem?
Component queries in ExtJS are very similar to CSS query selectors. You could find a component by a specific property with syntax similar to: "... > [title=My Component Title]" - that said, using the "title" sounds like really bad practice.
At worst, as a visible part of the user-interface it's very sensitive to change - easily breaking your application and at best it immediately limits your application's language-support and configurability.
Ideally you should be utilising the itemId property as a more robust way of referencing components.
» fiddle
I hadn't noticed that 4.2 didn't support attribute selectors - the component query functionality seems to have always drawn inspiration from CSS though, so unfortunately if it's only a recent development it doesn't look like there's any way to do what you want using this method.
You'd have to manually fetch the component and/or create your own reference. You can select by xtype / alias in 4.2 and then apply a filter to the result, for example:
Ext.Array.filter(Ext.ComponentQuery.query('panel'), function(x){
return !!x.title.match('Sub Panel 2');
}).shift();
( Obviously no use in a controller's refs )
» fiddle
... this is however ugly - all the more reason to use itemId's properly. There was already an example of this in action in the first fiddle. All you need to do is assign an alphanumeric string (no spaces) to the property - these don't strictly need to be unique but it's generally preferable. Then in your selector simply prefix a hash # in front of the string which indicates to the engine that you are looking for a component with a specific ID.
itemId selectors definitely work in 4.2 so without seeing your code I can only speculate as to what the problem is. In your post you are using > which narrows the query to direct descendants only. Are you absolutely sure that the component you are looking for is a child of myPanel_alias and not wrapped up in another container? i.e.
"myPanel_alias #myItemId" <-- try this
"myPanel_alias > #myItemId" <-- instead of this
I'm working on a module in which I need to draw multiple node-add forms, from different content-types, in the same page and save them all at once. I have all the content types of every node I need to add, and I even managed to get the fields using field_info_instances("node", $type).
Now I need to render the fields. I found node_add() but this function creates the entire form, including save buttons and publishing options. I only need the widgets for the fields.
Is there a hook or a function in drupal that will render only the widgets for a node-add form given the content type, or even the widgets for a field given it's info?
R.
PS: I'm working on drupal 7.x
Calling node_add($content_type); will give you the node add form for this specific form type.
I'd think this way
$form = array();
$types = array('page', 'blog', 'article');
foreach ($types as $type) {
$type_form = node_add($type);
// Somehow merge this data with the $form array avoiding the conflicts
// resulting from mulitple fields with same name.
// and find a way to submit all of them with one button .. ajax?
}
return $form;
I need to update a Store based on some information that I have.
I have a table in the document, that uses some Store to keep data,
and in separate part of page I have a button that needs to add some information to the Store (and table). I got a bit confused, so, I just ask here all I need to know:
Which property in table configuration needs to be specified to locate table later?
Which call I need to make to find the table and locate its store?
How I can generate and append data to the table's existing store?
The "table" you are referring to is Grid in ExtJS terminology.
1. To get the grid for later use, you need a reference to that object. There are many ways in ExtJS to get hold of this reference.
Using Javascript Variables: Most simple way is to have a javascript variable that will hold the reference. This is usually done when the grid is created. For example:
var myGrid = Ext.create('Ext.grid.Panel', {
// All the configs...
});
You can use the myGrid variable to get access to the grid.
Using ComponentManager: When an ExtJS component is created, it gets registered with the component manager. You can always get hold of an ExtJS component from this register. The manager tracks each component with a unique id. To use this method, you will have to define a unique id for your grid component and later use the famous Ext.getCmp() method. Here is an example:
var myGrid = Ext.create('Ext.grid.Panel', {
id: 'myGrid', // Unique id for the grid
// All other configs...
});
Using this method is NOT the best practice.
Using itemId and Component Query: A better method than the above two; you can use the itemId config and ComponentQuery. ComponentQuery class provides a selector-based searching for Sencha Components analogous to DOM querying. Example:
var myGrid = Ext.create('Ext.grid.Panel', {
itemId: 'myGrid',
// All other configs...
});
And to get a reference, you may call the query() method from a container or use Ext.ComponentManager (this is global).
Accessing in MVC controller: If you are developing your application using MVC, you can make use of this method. A controller have reference array namely: refs. (Internally, the method makes use of ComponentQuery and selectors to access the component). Refer MVC guides and examples to see how this works..
2. Once you obtain the grid with any the above techniques, you can get the store simply by calling the method: getStore(). This returns the store object (Ext.data.Store). Example:
myStore = myGrid.getStore();
3. Refer the Ext.data.Store documentation. you can manipulate your grid's store using methods like add(),load(),remove() etc...
FYI.
It is not
Ext.Cmp()
it is
Ext.getCmp('myGrid')