I tried using something as follows, however it is not working:
store.each(function(record){
console.log("record+++++", record);
});
TreeStore has a slightly different interface than a regular store, which is annoying. I usually do something like this:
_.each(store.getRootNode().childNodes, function(record) {
console.log(record);
});
Related
Prior to Modernizr v3, I was using yepnope.js
Modernizr.load and yepnope.js have both been deprecated. How do we conditionally call stylesheets or javascript files now?
Example that worked with Modernizr v2.5.3:
Modernizr.load({
test: Modernizr['object-fit'],
nope: ['./dist/scripts/object-fit.js'],
complete: function(){
if (!Modernizr['object-fit']) {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}
}
});
There's a new syntax and the feature names are all lowercase. You can combine that with jQuery's getScript method.
Which would look something like this:
if (Modernizr.objectfit){
jQuery.getScript("./dist/scripts/object-fit.js")
//it worked! do something!
.done(function(){
console.log('js loaded');
})
//it didn't work! do something!
.fail(function(){
console.log('js not loaded');
});
} else {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}
Have a look here for scripts: https://stackoverflow.com/a/7719185 — no jQuery required. (Note that there's a shorter Promise example a bit down in the answer; don't stop reading after the first example (like I did)).
And here for CSS: loadCSS: https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
— this is, in a way, even better than YepNope.js, if you don't need any of its features except for just loading stuff + callback. Because the stuff linked above, is smaller (smaller min.js.gz) than yepnope.js.
(And can combine with Modernizr like mhk showed in his answer.)
I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.
I Create a store like this:
Ext.define('App.store.task.STask', {
extend : 'Ext.data.Store',
//more other code....
listeners :{
totalcountchange :function(){
console.info('1111');
}
}
});
look the code,
totalcountchange not work,and i can't find this event on extjs4 api。i tried many times,but not work.
There is no event totalcountchange.
You can use the event datachanged.
You can access and count (store.data.length) your store data in the handler function.
See: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store-event-datachanged
Yii newbie here
I have tried more than once to figure out a way to include an Ajax/JS function in an easy clean way in my CGRIDVIEW,
the code is basically
'click'=> "function (){
$.fn.yiiGridView.update('news-grid', {
type:'POST',
url:$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
})
return false;
}"
In your opinion, whats the cleanest, most performance benificial way to include this?
Thank you for your time !!!
I don't know but I dont see necesary to force the grid to update twice on a single operation, I also don't like to include my javascript like that. Depending on what I need there are several approaches, for the sake of this answer ill show you the easiest one:
Create a global object, in a separate file:
//app.js
var App = {
updateSomething: function () {
$.post(
$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
);
return false;
}
};
And the you can include that file from your controller by calling CCLientScript::registerScriptFile
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl."js/app.js");
And on your grid:
'click'=> "js:App.updateSomething",
There are much better approaches, but this is the more simple for js beginners that want to have some kind of organization.
I am using ExtJs 4 with a Tree panel on west region and TreeGrid panel on center region. Is there any way to filter the TreeGrid panel(center region) on selection of the treepanel(west) ??
I tried the following but no luck :
Ext.define('MyApp.view.MyViewport', {
extend: 'MyApp.view.ui.MyViewport',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me);
}, //end of initComponent
CenterTreeFilter: function(){
var selection = this.down('#westTreePanel').getView().getSelectionModel().getSelection()[0];
var centerTreeGrid = this.down('#centerTreeGrid');
console.log(selection.data.text);
centerTreeGrid.store.filterBy(function(rec, id){
console.log(rec);
return (rec.store("text") == selection.data.text);
});
console.log("sub store : " + this.down('#centerTreeGrid').getStore().storeId);
}
});
After days of fighting with this issue, I was finally able to get the functionality, albeit in a not so satisfying way. Also, only leaf nodes are currently hidden.
filtering all nodes that don't mention "text":
t.getRootNode().cascadeBy(function(n){
if (!n.hasChildNodes() &&
n.raw && n.raw.text.toLowerCase().indexOf(text.toLowerCase()) < 0) {
toRemove.push({ node: n, parent: n.parentNode });
}
});
To restore later, run:
function restoreTrees() {
for (var n in toRemove) {
toRemove[n].parent.appendChild(toRemove[n].node);
}
toRemove = [];
}
There are many flaws with this solution. Including that the restored tree will probably have a different ordering for their nodes. But hey, at least this is some progress.
Would love to see a better one! (Had it working beautifully in Ext JS 3, but now these darn nodes don't have a .ui.hide() function any more).
i've checked their example http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html, in fact the issue here is that the store for the treeGrid is a tree store which doesn;t have the method filterBy , the method filterBy is defined in ext.data.store and treeStore extends ext.data.abstractStore.. as i see it you have to apply your filters diferently, using the the filters config for the treeStore. You can define your filter and set the filterOnLoad on true and instead of calling the filterBy method do centerTreeGrid.store.fireEvent('load',selection). I hope this helps you
Edit
I haven't used filters for tree stores but i think you can do something like this
var treeFilter = new Ext.util.Filter({
filterFn: function(rec) {
console.log(rec);
return (rec.store("text") == selection.data.text);
});
And assign the filter to the treeStore in the initComponent
centerGrid.store.filters.add(treeFilter);
centerGrid.store.filterOnLoad = true;
And in the CenterTreeFilter function
centerGrid.store.fireEvent('load',selection);
P.s the code is untested and probably it will need some modifications, but i think this is the way to do it.