I have column with buttons like this:
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
header: 'Issue',
renderer: function(val){
return '<input type="button" class="btnissue" value="Issue" />';
},
dataIndex: 'btn', width: 49
}
],
renderTo: Ext.get('Issuing')
});
And I want to fire click events for this buttons.
If I write :
Ext.getCmp('btnissue').on('click',function(){
alert("message");
});
It says that the button does not exist.
So how can I fire this event?
getCmp looks up an ExtJS component. As YOU create the button you should use get instead.
Related
I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
I am trying to dynamically bind to a value on a button.
I previously had
xtype: 'button',
Text: 'my button',
Bind: {'mystring'}
And then in another one of my .js files I had
MyApp.model.ModelView.getView().getViewModel().set(receivedTag, receivedData);
This was setting the value correctly, but now I want to add a second bind value to my button to bind a style too so my button now is
xtype: 'button',
Text: 'my button',
Bind: {myTag :'{myString}',
Style: '{background}'}
Using the method I had for setting the bind tag dynamically no longer works and returns an error of
Cannot bind myTag on Ext.button.Button - missing setmytag method
Any help would be appreciated as it was working fine before i decided I wanted a second tag!
See https://docs.sencha.com/extjs/5.1/application_architecture/view_models_data_binding.html
You have to implement an additional setter method for myTag property, i.e. setMyTag, so that your button config should be as following:
{
xtype: 'button',
myTag: undefined,
text: 'my button',
setMyTag: function(value) {
this.myTag = value;
},
bind: {
myTag :'{myString}',
style: '{background}'
}
}
I think by clicking on the button to display the calendar view eventLimit with different parameters, because there are a number of events on the page is a user added or modified, but not saved to the server. Users need to switch to a different view of events limit, which is in this jsfiddle
To change options when the calendar is already rendered you need to destroy the calendar first, change the option, then build the calendar again.
You can do it like this:
var options = $('.calendar').fullCalendar('getView').options;
options.eventLimit = false;
$('.calendar').fullCalendar('destroy');
$('.calendar').fullCalendar(options);
jsfiddle
The ability to change options dynamically now exists.
You don't have to destroy the calendar.
The syntax is calendar.setOption('eventLimit',false) to set the limit and calendar.getOption('eventLimit') to see what it is.
I wanted to have a button to expand/collapse all events on button click so I made a custom button like this:
calendar = new FullCalendar.Calendar($("#calendar"), {
plugins: [ 'dayGrid', 'interaction', 'timeGrid', 'list' ],
height: 700,
displayEventEnd: true,
customButtons: {
eventLimitButton: {
text: 'Expand/Collapse All',
click: function() {
if(!calendar.getOption('eventLimit'))
calendar.setOption('eventLimit',5); //I set the limit to 5
else
calendar.setOption('eventLimit',false);
}
}
},
header: {
left: 'prev,next today eventLimitButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
buttonText: {
today: "Today",
dayGridMonth: "Month",
timeGridWeek: "Week",
timeGridDay: "Day",
listWeek: "Weekly List"
},
//...
I'm trying to open a details popup to show more details about a record in a kendoUI grid.
I've seen this sample: http://demos.kendoui.com/web/grid/detailtemplate.html
But instead of a grid, i'd like to open a popup passing the ID of the selected record.
How can I do this?
Have you seen the custom popup example?
http://demos.kendoui.com/web/grid/custom-command.html
The Kendo Grid has its own popup edit form that takes care of that and can also be customized with a template.
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template
Pretty straightforward. Subscribe to the onChange event and alert the selected id. I assume you mean the attribute id. :
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).attr("id");
});
alert(selected);
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
change: onChange,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "Age"
}
]
});
});
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
I can select a date(period) only if I enter a title.
How can I fix this so that I can enter an event without title?
Note: Fullcalendar from arshaw.com/fullcalendar/
I have this someone may find usefull for example y have a dialog with 2 inputs and a create button (html) i wanna input title and other info, took me a while to figure out uuuuf it wooooorks be thankfull for my genius hehe:)
select: function(start, end, allDay) {
$('#mydialog').dialog('open'); // open the dialog you must have a div defined with 2 or more inputs
$("#create").bind("click", { start: start, end: end,allDay: allDay }, function(event){ // when you click in a create button inside dialog you should send as parameters start,end,etc
$input1 = $("#input1").val();
$title = $("#input2").val();
if ($title) {
$mycalendar.fullCalendar('renderEvent',
{
id: $id, // CORREGIR obtener el ultimo id
title: $title,
start: start,
end: end,
allDay: allDay,
url: $url
},
true // make the event "stick"
);
}else{
$mycalendar.fullCalendar('unselect');
}
$('#mydialog').dialog('close');// close my dialog
});
},
You could go for a html popup and a callback method to store the value instead of javascript prompt, that gives you much more controll over layout and more.