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
Related
My fullcalendar object has events loaded from a URL as seen below. When an event on the calendar is clicked, I need to not only pass that event back to a function (which is built in), but I need to also find another event that is associated with the clicked event by a field called lesson_id). Is there a way to loop through the events to find the other event with the same lesson_id?
events: {
url: smurl + "&subCmd=sch",
error: function () {
$('#script-warning').show();
},
viewRender: function (view) {
try {
setTimeline(view);
} catch (err) { }
}
},
I believe I have found my answer. It appears that .fullCalendar( 'clientEvents' [, idOrFilter ] ) returns an array of event objects held in memory.
I want to know whether a combo box has been opened and call a function that displays an progress bar while it loads the data from a store. I've check the API but no I didn't find any suitable event for what I'm doing.
EDIT
What I want to do is start a progress bar while the combobox is populated from the store. I've created a widget with the combobox and the progress bar (a custom class) and "decorate" openDropDown function with aspect.before. This is the code I've written:
postCreate: function() {
this.inherited(arguments);
aspect.before(
this.comboBox, 'openDropDown',
lang.hitch(this, function(){
this.progressBar.increase();
})
);
on(
this.comboBox,
'search',
lang.hitch(this.progressBar, 'decrease')
);
}
But it seems is not using the right progressBar object.
It sounds like you are looking for something like an "onOpen" event. as of Dojo 1.10 The Dijit/Combobox widget does not support an event like the one you are describing, however it does support a number of other events that might meet your requirements.
I recommend looking into the api for a list of possible events: http://dojotoolkit.org/api/
However the following code will create a custom "onOpen" event like what you are describing. I've provided a jsfiddle which demos this new event
http://jsfiddle.net/kagant15/z4nvzy44/
var comboBox = new ComboBox({
id: "stateSelect",
name: "state",
value: "California",
store: stateStore,
searchAttr: "name"
}, "stateSelect")
// grab the existing openDropDown method
var openDropDownFunction = comboBox.openDropDown;
newFunction = function(){
topic.publish("openDropDown") // add the custom "openDropDown" event trigger
return openDropDownFunction.apply(this);
}
// replace the old comBox method will our new function
comboBox.openDropDown = newFunction;
// Subscribe to the custom openDropDown event and do something when it fires
topic.subscribe("openDropDown", function(){
console.log("Open Drop Down even trigger");
});
I have a problem in preserving the values in the textbox after dropdownlist selected index changed in asp.net mvc. Below is the code for initiating the dropdown onchange event.
#Html.DropDownList("BranchId",null,"Select Branch", new { onchange = "location.href='/User/GetRoles?BranchId='+this.options[this.selectedIndex].value" })
Аnd the roles dropdown binded with the values, but what i typed in the textboxes just above the branch dropdown get lost.
Please help me.
Regards,
Azeem
This is because you are changing your URL location by using location.href. What exactly do you want to achieve? If you need to load certain logic, you might as well bind change event to jQuery function that could load data from the server, and then you do something with that data.
$(document).ready(function() {
$("#BranchId").change(function() {
$.getJSON(YourUrlThatReturnsValues, {data: yourparameter}, function() {
// do some processing here.
});
});
});
The other option is to use Ajax Helpers instead of Html Helpers. Instead of Html.DropDownList you would use Ajax.DropDownList.
You may try something like that:
$(function () {
$('#BranchId').change(function () {
var id = $("#BranchId option:selected").val();
var data = {BranchId: id };
$.get("#Url.Action("User", "GetRoles")", data).done(function(d){
$('.somediv').val(d.rolename)
});
});
I am rather new to sencha touch, I've done a lot of research and tutorials to learn the basics but now that I am experimenting I have run into a problem that I can't figure out.
I have a basic DataList which gets its data from a store which displays in a xtemplate.
Within this template I have created a member function which requires store field data to be parsed as a parameter.
I would like to make a thumbnail image (that's source is pulled from the store) execute the member function on click/tap.
I can't find any information on this within the docs, does anyone know the best way to go about this?
Here is a code example (pulled from docs as I can't access my actual code right now).
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>'
{
tapFunction: function(name){
alert(name);
}
}
);
tpl.overwrite(panel.body, data);
I want to make the paragraph clickable which will then execute the tapFunction() member function and pass the {name} variable.
Doing something like onclick="{[this.tapFunction(values.name)]} " does not seem to work.
I think functions in template are executed as soon as the view is rendered so I don't think this is the proper solution.
What I would do in your case is :
Add a unique class to your < p > tag
tpl : '<p class="my-p-tag">{name}</p>'
Detect the itemtap event on the list
In your dataview controller, you add an tap event listener on your list.
refs: {
myList: 'WHATEVER_REFERENCE_MATCHES_YOUR_LIST'
},
control: {
myList: {
itemtap: 'listItemTap'
}
}
Check if the target of the tap is the < p > tag
To do so, implement your listItemTap function like so :
listItemTap: function(list,index,target,record,e){
var node = e.target;
if (node.className && node.className.indexOf('my-p-tag') > -1) {
console.log(record.get('name'));
}
}
Hope this helps
In my application i have many windows and panels and im using custom scrollbars. So for each window or panel i need to specify afterlayout listener to get the custom scroll bar
listeners:{
afterlayout: function(c){
fleXenv.fleXcrollMain(c.body.id);
}
}
So what im looking for is i need to add this listener globally for windows and panels so that by adding this code one time should effect on all windows or panels.
Is there any way to do this
It seems that your custom scrollbar is used in all Windows and Panels of your application. Hence there is nothing wrong with extending the core ExtJs classes IMHO.
Implement it as a 'feature' that is enabled by default but - for the rare cases where you don't want the scrollbar - can be disabled.
Ext.define('patch.Ext.panel.Panel-scrollbar', {
override: 'Ext.panel.Panel',
enableCustomScrollbar: true,
afterLayout: function() {
this.fixScrollbar();
this.callParent(arguments);
},
fixScrollbar: function() {
if(this.enableCustomScrollbar) {
// your code
}
}
});
Load with Ext.require('patch.Ext.panel.Panel-scrollbar') or add it as dependency (requires) to your application definition.
Ext.window.Window extends from Ext.panel.Panel, hence it will inherit the behavior.
You can make your own panel and window extending ExtJS default components. You can define desired listener, set up xtypes and then use these modified components in your application.
Another solution would be to override existing Ext.panel.Panel and Ext.window.Window with Ext.override
IMHO, I think the best way to do this is to define your personal Window/Panel class. Yes, one way is to use Ext.override function but I don't think it's a good idea.
I suggest you to do this:
Ext.define ('MyCustomWindow', {
extend: 'Ext.window.Window' ,
listeners: {
afterlayout: function (win) {
fleXenv.fleXcrollMain (win.body.id);
}
}
}
Ext.define ('MyCustomPanel', {
extend: 'Ext.panel.Panel' ,
listeners: {
afterlayout: function (panel) {
fleXenv.fleXcrollMain (panel.body.id);
}
}
}
Now, you can instantiate MyCustomWindow and MyCustomPanel, leaving Ext.window.Window and Ext.panel.Panel unchanged.
Another way is to use WindowManager and PanelManager (this one defined by yourself):
Ext.WindowManager.register (window1);
Ext.WindowManager.register (window2);
Ext.WindowManager.register (window3);
Ext.WindowManager.each (function (win) {
win.on ('afterlayout', function (window) {
fleXenv.fleXcrollMain (window.body.id);
});
});
In this case, first you have to instantiate your windows and panels, register them to their managers and then invoke the each function as I did in the example above.