How do I get the ExtJs component object of a Div by class name?
Say my div is:
<div class="abc"></div>
How do I get the ExtJs object of this Div to perform e.g. getWidth()
Note: There is no id given.
What I tried:
Ext.select(".abc")
Ext.query(".abc")
Edit:
Error:
Object has no method 'getWidth'
<div id="main">
<div class="abc"></div>
</div>
var d = Ext.get( "main" );
d.query('.abc').getWidth();
Use
var dom = Ext.dom.Query.select('.abc');
var el = Ext.get(dom[0]);
This will return an Ext.Element. You can then use ext methods on el like so
el.on('click', function(){}, scope);
or
el.getWidth()
I believe you mean Ext.dom.Element (not ExtJs component object). If yes try this code
var d = Ext.get( "main" );
alert(d.down('.abc').getWidth());
demo
For Ext4 and up you could use the following:
Ext.ComponentQuery.query('panel[cls=myCls]');
And you will get and array of this components
source: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
Ext.select('abc');
This method works in EXT 4 also.
In your example, just remove the dot when calling the string of the class name.
Related
I'm creating form using createElement() in ReactJSX.
My code looks like this:
var form = document.createElement('form');
form.id = "new_message_form";
form.method = 'post';
form.className = 'chat_input';
I want to use data-remote="true" in this form (it should be something like this:
form.data-remote="true";
Can anybody advise how to do this?
Because there is no standard attribute like data-remote or remote in html forms, it's just custom attribute that is related to rails specificly.
Docs on data-* attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
So, to set that attribute, you need to set this attribute explicitly:
form.setAttribute("data-remote", "true");
JSX
<form id="new_message_form" method="post" className="chat_input" data-remote="true"/>
desugared to JS
React.createElement("form", { id: "new_message_form", method: "post", className: "chat_input", "data-remote": "true" })
You can use JSX online in the Babel REPL to see if it gets compiled to what you need: http://babeljs.io/repl/
I solved my problem with setting attribute directly to form.
Code: form.setAttribute("data-remote", "true");
I am trying to create a simple bar chart, but when appending the bars to the DOM I get this error
Object [object Object] has no method 'appendChild'
$rootScope.drawChart = function (data,selector,padding){
var max = Math.max.apply(Math, data);
var chart = angular.element(document.getElementById("chartxx"));
var barwidth = ((chart.offsetWidth-(data.length-1)*padding-(data.length)*10)/data.length);
var sum = data.reduce(function(pv, cv) { return pv + cv; }, 0);
var left = 0;
for (var i in data){
var newbar = document.createElement('div');
newbar.setAttribute("class", "bar");
newbar.style.width=barwidth+"px";
newbar.style.height=((data[i]/max)*100)+"%";
newbar.style.left=left+"px";
console.log(chart);
angular.element(document.getElementById("chartxx")).appendChild(newbar);
left += (barwidth+padding+10);
}
}
var values = [85,95,120,100,200,200,230,230,60,320,23,3433,434,45,23,23];
$rootScope.drawChart(values,"#chartxx2",5);
<div class="wrapperx2">
<div id="chartxx"></div>
</div>
appendChild() is a method inherent to native HTML objects, aka the result of document.getElementById. When you give that HTML object to angular.element it becomes a jQuery Object. jQuery objects have a similar method called append()
So you can do document.getElementById("chartxx").appendChild(newbar) or angular.element(document.getElementById("chartxxx")).append(newbar).
So that should answer your question but I can't help but ask myself : why would you do something like that when you're using AngularJS ?
Edit
Ok so here's a very poorly achieved version of what I would have done in your place (if I was ABSOLUTELY unable to use an external library, because using an external library for charts is what I would normally do). I suggest you see and try to understand how the ng-repeat works here and try to apply it to your case.
angular.element doesn't contain method appendChild
angular.element doc
You can try:
chart.append(newbar);
I'm using openlayers3 (ol3) and angular 1.5.6 on IE Edge.
I have two modules. Each has their own controller and component. Each controller wants to have a map in the view. One view is for interactively querying data off its map. The other view is for displaying interactive query results.
Under the hood, I provide a MapFactory which returns an instance of a object, containing the said openlayers map.
PROBLEM: The one displays while the other does not.
Here's a sample of my code (some details are left out for simplicity. For example the dependency injection checks. All of this code is being called as expected.):
Module A definition
angular.module('ModuleA').controller('ModuleAController',ModuleAController);
ModuleAController.$inject = ['MapFactory'];
function ModuleAController(MapFactory){
var vm = this;
var vm.map = MapFactory.getMapInstance({
id:'module-A-map',
otherOption:true
});
}
In ModuleA's view:
<div id='module-A-map' class="map-classes"></div>
Module B definition
angular.module('ModuleB').controller('ModuleBController',ModuleBController);
ModuleBController.$inject = ['MapFactory'];
function ModuleBController(MapFactory){
var vm = this;
var vm.map = MapFactory.getMapInstance({
id:'module-B-map',
otherOption:true
});
}
In ModuleB's view:
<div id='module-B-map' class="map-classes"></div>
MapFactory's definition:
angular.module('common').factory('MapFactory',MapFactory);
MapFactory.$inject = [];
function MapFactory(){
var factory = {
getMapInstance : getMapInstance
};
return factory;
function getMapInstance(options){
return new _MapConstructor(options);
}
function _MapConstructor(options){
var _map = new ol.Map({
target : options.id,
logo : false,
view : new ol.View({...}),
layers : [some,layers,here]
});
return {
publicMethod : publicMethod
};
function publicMethod(){...}
function privateMethod(){...}
... other stuff ...
}
}
Please, let me know if any clarification is needed to answer the question.
MORE:
This issue: https://github.com/openlayers/ol3/issues/4601 might be part of the problem. I am using collapsable DIVs with bootstrap. The ModuleA is in the default displayed one, while ModuleB is hidden at first. More to come.
I wrote this up as an OL3 issue as well: https://github.com/openlayers/ol3/issues/5789
ABSTRACT ANSWER:
http://getbootstrap.com/javascript/#collapse-events
I need to add a _map.updateSize() on a show.bs.collapse or shown.bs.collapse event. Now, I need to figure out how to do that in Angular, and post it (unless somebody gets to it first).
Ah, this is in Bootstrap's collapse class. So, let's back up to the Module-B view. Each of my Module's is a panel within a Bootstrap panel accordian. The ModuleA map that displays is the default open panel (the one that has the in class). The ModuleB map is not open by default, and thus, OL3 gives the canvas a display:none in the map's div's style.
<div id="module-B-collapse" class="panel-collapse collapse" >
<div id='module-B-map' class="map-classes"></div>
....
</div>
In my ModuleBController, I simply added:
angular.element('#module-B-collapse').on('shown.bs.collapse',function(){
_map.updateSize();
});
I have been using bootstrap selectpicker where I've added an Add Button for user to replicate the button as much as he wants. Problem is, selectpicker is not working on the second / cloned element and values of dropdown are just showing and not changing on click.
Main Select:
<div id="main_product">
<select name="product[]" class="selectpicker" >
<option value="Tube Lights" >Tube Lights</option>
<option value="Downlights" >Downlights</option>
</select>
</div>
Clone Function:
function clone()
{
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
$cloned.appendTo('#new_products');
// $cloned.find('.bootstrap-select').remove();
// $cloned.find('select').selectpicker();
}
Note that I tried to reassign the selectpicker to the cloned object which is in comments atm, because it dint work also.
Any help would be really appreciated.
I came across this problem but if using the latest version now the select is placed inside the .bootstrap-select element for html5 error handling purposes. The remove() also removes the select, a work around is:
Instead of:
$cloned.find('.bootstrap-select').remove();
Use:
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
This will replace the .bootstrap-select element with the select element that it contains inside.
function clone()
{
//you can use :
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
//Or
var $cloned = $('#main_product').clone();
//then use this to solve duplication problem
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); })
$cloned .find('.selectpicker').selectpicker('render');
//Then Append
$cloned.appendTo('#new_products');
}
if we replace the bootstrap-select with the select then the problem is in HTML structure.
so, original element is actual bootstrap-select and cloned are normal select.
take look at following for more clarification.
instead of this
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
use
$cloned.selectpicker('refresh');
$cloned.find('.bootstrap-select:odd').remove();
You can please change clone function
function clone() {
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
var $selectPicker = $cloned.find('select');
$cloned
.find('.bootstrap-select').remove().end()
.append($selectPicker).end();
$cloned.find('select').selectpicker();
$cloned.appendTo('#new_products');
}
When using in Form Sets along with other form fields you need to replace and render all the selectpicker mentioned by #cm_mehdi. First find the new form html element and apply the below code:
//Clone new form
let newForm = purchaseForm[0].cloneNode(true);
// Replace and render the cloned html selectpicker
$(newForm).find('.bootstrap-select').replaceWith(function() { return $('select', this); })
$(newForm).find('.selectpicker').selectpicker('render');
// Re-Initialize search in dropdown
$(`#id_form_formfield-${formNum}`).selectpicker({liveSearch: true});
The problem is I want to render option elements with the value attribute set as well as the text node.
So setting tagName to option in my ItemView does not just do this. The solution I have at the moment is to set it to option and then use the following code in the ItemView constructor to set the value attibute:
onRender: function () {
this.$el.attr('value', this.model.get('name'));
}
This works.
But is there any other way?
What I'd really like to do is just tell Marionette not to output an element at all and then in my ItemView template have this:
<option value="<%= name %>"> <%= name %> </option>
Is this possible?
It's possible but a bit fiddly, by default Backbone always uses a wrapper element (definable by using tagName) but you'd have to expressly populate the attributes (as you are doing above).
It is however possible to circumvent the wrapper element using a slightly convoluted setElement approach and this will enable you keep all markup in a template with attributes on the root node populated from the model. I like this approach as well since I personally think it keeps a clearer separation of concerns.
Take a look here for an example - Backbone, not "this.el" wrapping
Not sure if Marionette has a build in mechanism for doing this.
I am not sure you should from all different kind of reasons.
But I understand that in the use case of a single tag view, the way Marionette/Backbone work you either create another tag and have a view, or you use onRender and query to update the single tag that was already generated for you.
You could have this Object that will extend ItemView, lets call it SingleTagView. Basicly I am extending ItemView and using overrunning it's render function with one change.
Instead of doing:
this.$el.html(html);
I am doing:
var $html = $(html);
this.$el.replaceWith($html);
this.setElement($html);
Here is the code:
var SingleTagView = Marionette.ItemView.extend({
render: function() {
this.isClosed = false;
this.triggerMethod("before:render", this);
this.triggerMethod("item:before:render", this);
var data = this.serializeData();
data = this.mixinTemplateHelpers(data);
var template = this.getTemplate();
var html = Marionette.Renderer.render(template, data);
// above is standart ItemView code
var $html = $(html);
this.$el.replaceWith($html);
this.setElement($html);
// this code above replaced this.$el.html(html);
// below is standart ItemView code
this.bindUIElements();
this.triggerMethod("render", this);
this.triggerMethod("item:rendered", this);
return this;
}
});
If you are going to use this kind of angle, make sure you test the behavior properly (event handling, Dom leaks, different flows with before:render events).
I would try:
var optionTag = Marionette.ItemView.extend({
tagName: "option",
initialize: function(){
this.attributes = {
value: this.model.get('name');
}
}
}
Backbone should then do the rest (i.e. putting the content of attributes into the HTML tag)...