I am trying to modify this code, so after I create the column, and let's say I want to change the title of it, so I have the edit button, once I click that one, I want to be able to type and change the title of the column.
For the whole code click here.
function Column(name) {
if (name.length > 0) {
var self = this; // useful for nested functions
this.id = randomString();
this.name = name;
this.$element = createColumn();
function createColumn() {
var $column = $("<div>").addClass("column");
var $columnTitle = $("<h3>")
.addClass("column-title")
.text(self.name);
var $columnTitleEdit = $("<button>")
.addClass("btn-edit")
.text("Edit");
var $columnCardList = $("<ul>").addClass("column-card-list");
var $columnDelete = $("<button>")
.addClass("btn-delete")
.text("x");
var $columnAddCard = $("<button>")
.addClass("add-card")
.text("Add a card");
$columnDelete.click(function() {
self.removeColumn();
});
$columnAddCard.click(function(event) {
self.addCard(new Card(prompt("Enter the name of the card")));
});
$columnTitleEdit.click(function(event) { //How to edit this code here so i can rename the title of the Column?
self.editTitle();
});
$column
.append($columnTitle)
.append($columnDelete)
.append($columnAddCard)
.append($columnCardList)
.append($columnTitleEdit);
return $column;
}
} else if (name.length == 0) {
alert("please type something");
$(".create-column").click();
} else {
return;
}
}
Column.prototype = {
addCard: function(card) {
this.$element.children("ul").append(card.$element);
},
removeColumn: function() {
this.$element.remove();
},
editTitle: function() {
if (this.$element == "true") {
this.$element.contentEditable = "false"; //How to edit this code here so i can rename the title of the Column?
} else {
this.$element == "true";
}
}
};
All you have to do is to add an event listener to the edit button. The handler should either replace the title with a textarea, or add the contenteditable attribute to the title element. Here's an example:
// ...
var $columnTitleEdit = $("<button>")
.addClass("btn-edit")
.text("Edit")
.on("click", function(){ //The event listener
if ($(this).hasClass("btn-save")){ //If we're currently editing the title
$columnTitle.attr("contenteditable", false);
$(this).text("Edit").removeClass("btn-save");
} else { //If we're not editing the title
$columnTitle.attr("contenteditable", true).focus();
$(this).text("Save").addClass("btn-save");
}
});
Related
I want to save a bool value for when you refresh the page, the value is true (if you want the color theme to be default, white) and false (if you want the color theme to be dark, black). Local storage is saving the last value correctly, and loading the correct value, but it is still not working, I don't know why. Here is my code, any help would be grateful.
var link = document.getElementById("color-mode");
var button = document.getElementById("theme-button");
var searchButton = document.getElementById("search-button");
var userSettings = document.getElementById("user-settings");
var siteLogo = document.getElementById("site-logo");
var isDefault = false;
button.onclick = function() {
if(isDefault == true) {
DarkTheme();
}
else {
DefaultTheme();
}
}
function DefaultTheme() {
link.href = "../static/CSS/default.css";
isDefault = true;
searchButton.src = "../static/Media/SearchIconDefault.png";
userSettings.src = "../static/Media/UserIconDefault.png";
siteLogo.src = "../static/Media/LogoDefault.png";
window.localStorage.setItem("saveTheme", isDefault);
}
function DarkTheme() {
link.href = "../static/CSS/dark.css";
isDefault = false;
searchButton.src = "../static/Media/SearchIconDark.png";
userSettings.src = "../static/Media/UserIconDark.png";
siteLogo.src = "../static/Media/LogoDark.png";
window.localStorage.setItem("saveTheme", isDefault);
}
function load() {
isDefault = window.localStorage.getItem("saveTheme");
console.log("Val: " + isDefault);
if(isDefault == false) {
DarkTheme();
}
else {
DefaultTheme();
}
}
load();
Read your code:
load() initially had isDefault as false
it calls DarkTheme, which sets isDefault also to false
then user click button
isDefault is false - then DarkTheme is called, which test isDefault also to false.
Application basically can't enter other theme, except the case where you change something manually in localStorage.
Change code to :
button.onclick = function() {
if(isDefault == true) {
DefaultTheme();
}
else {
DarkTheme();
}
}
I am using Quill.js to have users create custom user designed pages off the main web page. I have a custom slider that I have written in javascript that will take images and rotate through them. I have the toolbar in quill setup to be able to click on the toolbar to setup the slider in a modal window.
When the user clicks to close the modal slider setup window, I'm trying to insert an edit button in the html editor where the cursor sits so the user can edit the information that was just entered or possible delete the button by removing all the information in the slider modal window.
I have written custom blots, followed all the examples I could find and nothing worked. I did get a custom html tag to show, but not a button. When I requested the html from quill when I setup the custom html tag in the editor, all I get is "" from quill.root.innerHTML none of the custom tag or the information in it even though I see it correctly in the editor.
I would like a button in the editor to make it easy to edit the slider data, as there could be more than one. I am not going to limit the number of sliders. It is up to the user to ruin their own page.
I will not be rendering the slider in the edit html window, just trying to display a button to click on. I do give the user a preview button on the modal window to view the slider if they so choose.
I also would like to store the setup information of the slider in a data tag in json format in the button and change that html button to a tag along with the json data when rendering the html in the browser window.
Can this be done in Quill.js?
I did this by using the import blots embed. I don't register as a button but clicking on the blot I do get a link to the embedded data and trigger the edit of the carousel data on that click.
var Quill;
const BlockEmbed = Quill.import("blots/block/embed");
const Link = Quill.import('formats/link');
class Carousel extends BlockEmbed {
static create(value) {
var self = this;
const node = super.create(value);
node.dataset.carousel = JSON.stringify(value);
value.file.frames.forEach(frame => {
const frameDiv = document.createElement("div");
frameDiv.innerText = frame.title;
frameDiv.className += "previewDiv";
node.appendChild(frameDiv);
});
node.onclick = function () {
if (Carousel.onClick) {
Carousel.onClick(self, node);
}
};
return node;
}
static value(domNode) {
return JSON.parse(domNode.dataset.carousel);
}
static onClick: any;
static blotName = "carousel";
static className = "ql-carousel";
static tagName = "DIV";
}
Quill.register("formats/carousel", Carousel);
I then include this as a script on the page where quill is editing the HTML
<script src="~/js/quilljs-carousel.js"></script>
And then this is the custom javascript to handle the events of the blot displayed in a custom modal dialog in a hidden div tag
<script>
function CarouselClicked(blot, node) {
editCarousel(JSON.parse(node.dataset.carousel), node);
}
var Carousel = Quill.import("formats/carousel");
Carousel.onClick = CarouselClicked;
function carouselToolbarClickHandler() {
createCarousel();
}
var Toolbar = Quill.import("modules/toolbar");
Toolbar.DEFAULTS.handlers.carousel = carouselToolbarClickHandler;
$(document).ready(function() {
var div = $("#editor-container");
var Image = Quill.import('formats/image');
Image.className = "img-fluid";
Quill.register(Image, true);
var quill = new Quill(div.get(0),
{
modules: {
syntax: true,
toolbar: '#toolbar-container'
},
theme: 'snow'
});
div.data('quill', quill);
// Only show the toolbar when quill is ready to go
$('#toolbar-container').css('display', 'block');
div.css('display', 'block');
$('#editor-loading').css('display', 'none');
// Override the quill Image handler and create our own.
quill.getModule("toolbar").addHandler("image", imageHandler);
});
function createCarousel() {
$("#carouselModalForm").removeClass("was-validated").get(0).reset();
$("#carouselModalList").empty();
$("#carouselModal")
.data("state", "unsaved")
.one("hidden.bs.modal",
function() {
var data = getCarouselData();
var carouselData = {};
carouselData['file'] = data;
carouselData['speed'] = $('#time').val();
carouselData['height'] = $('#height').val();
carouselData['width'] = $('#width').val();
var quill = $("#editor-container").data().quill;
var range = quill.getSelection(true);
if (range != null) {
quill.insertEmbed(
range.index,
"carousel",
carouselData,
Quill.sources.USER
);
quill.setSelection(range.index + 2, Quill.sources.USER);
}
})
.modal("show");
$('#title').get(0).outerText = "Create Carousel";
}
function editCarousel(value, node) {
$("#carouselModalForm").get(0).reset();
var elem = $("#carouselModalList").empty();
$.each(value.file.frames,
function(i, data) {
$("<option>").appendTo(elem).text(data.title).data("frame", data);
});
$('#time').val(value.speed);
$('#height').val(value.height);
$('#width').val(value.width);
var modal = $("#carouselModal");
modal.find("form").removeClass("was-validated");
modal
.data("state", "unsaved")
.one("hidden.bs.modal",
function() {
if ($("#carouselModal").data("state") !== "saved")
return;
var data = getCarouselData();
var carouselData = {};
carouselData['file'] = data;
carouselData['speed'] = $('#time').val();
carouselData['height'] = $('#height').val();
carouselData['width'] = $('#width').val();
var carousel = Quill.find(node, true);
carousel.replaceWith("carousel", carouselData);
})
.modal("show");
$('#title').get(0).outerText = "Edit Carousel";
}
function getCarouselData() {
var options = $("#carouselModalList").find("option");
var frames = $.map(options,
function(domNode) {
return $(domNode).data("frame");
});
return {
frames : frames
};
}
function getCarouselFrameFormData() {
// Get data from frame
function objectifyForm(formArray) { //serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++) {
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
return objectifyForm($("#carouselFrameModalForm").serializeArray());
}
$("#carouselModalNewFrame").click(function() {
$("#carouselFrameModalForm").removeClass("was-validated").get(0).reset();
$("#backgroundPreview").attr("src", "");
$("#mainPreview").attr("src", "");
$("#carouselFrameModal")
.data("state", "unsaved")
.one("hidden.bs.modal",
function() {
if ($("#carouselFrameModal").data("state") == "saved") {
var data = getCarouselFrameFormData();
$("<option>").appendTo($("#carouselModalList")).text(data.title).data("frame", data);
}
})
.modal("show");
// Fetch all the forms we want to apply custom Bootstrap validation styles to
});
$("#carouselModalEditFrame").click(function () {
var form = $("#carouselFrameModalForm");
form.removeClass("was-validated").get(0).reset();
var selected = $("#carouselModalList option:selected");
var frame = selected.data("frame");
$.each(Object.keys(frame),
function (i, e) {
$("input[name=" + e + "]", form).val(frame[e]);
});
$("#backgroundPreview").attr("src", frame.backgroundImg);
$("#mainPreview").attr("src", frame.mainImg);
$("#carouselFrameModal")
.data("state", "unsaved")
.one("hidden.bs.modal",
function() {
if ($("#carouselFrameModal").data("state") == "saved") {
var data = getCarouselFrameFormData();
selected.text(data.title).data("frame", data);
}
})
.modal("show");
});
$("#carouselModalRemoveFrame").click(function () {
$("#confirm-delete").modal("show");
});
$("#carouselFrameModalForm").find("input:file").change(function() {
var elem = $(this);
var target = elem.data("target");
var preview = elem.data("preview");
FiletoBase64(this, preview, target);
});
$("#carouselModalList").change(function() {
var selected = $("option:selected", this);
$("#carouselModalEditFrame,#carouselModalRemoveFrame").prop("disabled", !selected.length);
});
$("#carouselModalSave").click(function() {
// Validate frameset
var form = $("#carouselModalForm").get(0);
var select = $("#carouselModalList");
if (select.find("option").length == 0) {
select.get(0).setCustomValidity("Need at least one frame");
} else {
select.get(0).setCustomValidity("");
}
if (form.checkValidity()) {
$("#carouselModal").data("state", "saved");
$("#carouselModal").modal("hide");
}
else {
$("#carouselModalForm").addClass("was-validated");
}
});
$("#carouselFrameModalSave").click(function() {
// Validate frame
if ($("#carouselFrameModalForm").get(0).checkValidity()) {
$("#carouselFrameModal").data("state", "saved");
$("#carouselFrameModal").modal("hide");
}
else {
$("#carouselFrameModalForm").addClass("was-validated");
}
});
$('#confirm-delete-delete').click(function () {
$("#carouselModalList option:selected").remove();
$("#confirm-delete").modal("hide");
});
// #region Image FileExplorer Handler
function insertImageToEditor(url) {
var div = $("#editor-container");
var quill = div.data('quill');
var range = quill.getSelection();
quill.insertEmbed(range.index, 'image', url);
}
function CarouselMainimageHandler() {
$("#CarouselMainimageSelectFileExplorer").fileExplorer({
directoryListUrl: '#Url.Action("DirectoryList", "FileTree")',
fileListUrl: '#Url.Action("FileList", "FileTree")'
});
$("#CarouselMainimageSelectModal").modal("show");
}
$("#CarouselMainimageSelectModal").on("hide.bs.modal",
function() {
$("#CarouselMainimageSelectFileExplorer").fileExplorer("destroy");
});
$("#CarouselMainimageSelectSelectButton").click(function() {
var id = $("#CarouselMainimageSelectFileExplorer").fileExplorer("getSelectedFileId");
if (id == null) {
alert("Please select a file");
return;
}
var imageName = $("#CarouselMainimageSelectFileExplorer").fileExplorer("getSelectedFileName");
var imageLink = "#Url.Action("Render", "FileTree")?id=" + id;
$("#mainImageName").val(imageName);
$("#mainImageLink").val(imageLink);
$("#mainImage").attr("src",imageLink);
$("#mainImage").show();
$("#CarouselMainimageSelectModal").modal("hide");
});
function CarouselBackgroundimageHandler() {
$("#CarouselBackgroundimageSelectFileExplorer").fileExplorer({
directoryListUrl: '#Url.Action("DirectoryList", "FileTree")',
fileListUrl: '#Url.Action("FileList", "FileTree")'
});
$("#CarouselBackgroundimageSelectModal").modal("show");
}
$("#CarouselBackgroundimageSelectModal").on("hide.bs.modal",
function() {
$("#CarouselBackgroundimageSelectFileExplorer").fileExplorer("destroy");
});
$("#CarouselBackgroundimageSelectSelectButton").click(function() {
var id = $("#CarouselBackgroundimageSelectFileExplorer").fileExplorer("getSelectedFileId");
if (id == null) {
alert("Please select a file");
return;
}
var imageName = $("#CarouselBackgroundimageSelectFileExplorer").fileExplorer("getSelectedFileName");
var imageLink = "#Url.Action("Render", "FileTree")?id=" + id;
$("#backgroundImageName").val(imageName);
$("#backgroundImageLink").val(imageLink);
$("#backgroundImage").attr("src",imageLink);
$("#backgroundImage").show();
$("#CarouselBackgroundimageSelectModal").modal("hide");
});
function imageHandler() {
$("#imageSelectFileExplorer").fileExplorer({
directoryListUrl: '#Url.Action("DirectoryList", "FileTree")',
fileListUrl: '#Url.Action("FileList", "FileTree")'
});
$("#imageSelectModal").modal("show");
}
$("#imageSelectModal").on("hide.bs.modal",
function() {
$("#imageSelectFileExplorer").fileExplorer("destroy");
});
$("#imageSelectSelectButton").click(function() {
var id = $("#imageSelectFileExplorer").fileExplorer("getSelectedFileId");
if (id == null) {
alert("Please select a file");
return;
}
insertImageToEditor("#Url.Action("Render", "FileTree")?id=" + id);
$("#imageSelectModal").modal("hide");
});
// #endregion
function Save() {
var div = $("#editor-container");
var quill = div.data('quill');
$('#alertSave').show();
$.post({
url: '#Url.Action("Save")',
data: { BodyHtml: quill.root.innerHTML, locationId: #(Model.LocationId?.ToString() ?? "null") },
headers: {
'#Xsrf.HeaderName': '#Xsrf.RequestToken'
}
}).done(function() {
$('#alertSave').hide();
$('#alertSuccess').show();
setTimeout(function() { $('#alertSuccess').hide(); }, 5000);
}).fail(function(jqXhr, error) {
var alert = $('#alertFailure');
var text = $("#alertFailureText");
text.text(error.ErrorMessage);
alert.show();
});
}
function FiletoBase64(input, imgName, Base64TextName) {
var preview = document.getElementById(imgName);
var file = input.files[0];
var reader = new FileReader();
reader.addEventListener("load",
function() {
preview.src = reader.result;
document.getElementById(Base64TextName).value = reader.result;
},
false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
I am a beginner in Javascript development and I have to do the classical to-do app. It has to be object-oriented and my program has two classes: Task and Tag.
A task contains some tags.
When the user clicks on a tag, he can modify its name. First, I did wrote an anonymous callback function which was listening to the modification form submission and it worked well. But, I have to create a named function declared somewhere else instead of my existing listener. However, I need to access to some of the properties of my object (which is edited) and I have absolutely no idea how to do a thing like that.
Here is a small part of my code:
module.Tag = class Tag {
constructor(name = 'untitled', parent = null) {
this.name = name;
this.parentTask = parent;
}
//Method which displays the tag name
display_name() {
return $('<li>').addClass('tag').text(this.name);
}
//Method which displays the tag
display() {
let tag_item = this.display_name();
let field = $('<input>').prop('type', 'text').prop('value', this.name);
let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
let removeButton = $('<button>').addClass('removeButton').text('X');
let form = $('<form>').append(field).append(button).append(removeButton);
let in_edit = false;
tag_item.click((event) => {
event.stopPropagation();
event.preventDefault();
let target = $(event.target);
if (target.is('li') && !in_edit) {
tag_item.empty();
tag_item.append(form);
in_edit = true;
}
if (target.is('button') && target.prop('type') === 'submit') {
if(field.val() !== '') {
this.name = field.val();
module.StorageManager.storeTasks();
}
tag_item.empty();
tag_item.text(this.name);
field.val(this.name);
in_edit = false;
}
if (target.is('button') && target.hasClass('removeButton')) {
if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
tag_item.remove();
this.removeTagFromParent();
module.StorageManager.storeTasks();
}
}
});
return tag_item;
}
//Method which removes the tag from the parent task
removeTagFromParent() {
this.parentTask.removeTag(this);
}
};
My listener is in the display method and it uses Tag.name property and some of the variables created in the method body. I can't see how to write this function somewhere else and Google didn't help me.
I hope my problem is clear, English is not my native language.
Some advices?
You can extract your anonymouse function to be another class method. It is an event handler so in order to correctly access the defined object you'll have to bind it correctly.
Here is an example of the modified script:
module.Tag = class Tag {
constructor(name = 'untitled', parent = null) {
this.name = name;
this.parentTask = parent;
}
//Method which displays the tag name
display_name() {
return $('<li>').addClass('tag').text(this.name);
}
//Method which displays the tag
display() {
let tag_item = this.display_name();
let field = $('<input>').prop('type', 'text').prop('value', this.name);
let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
let removeButton = $('<button>').addClass('removeButton').text('X');
let form = $('<form>').append(field).append(button).append(removeButton);
let in_edit = false;
tag_item.click(this.handleClick.bind(this));
// this is where you invoke the function and
//bind it to the context of the class
return tag_item;
}
//Method which removes the tag from the parent task
removeTagFromParent() {
this.parentTask.removeTag(this);
}
// extracted method defined here:
handleClick(event) {
let tag_item = this.display_name();
let field = $('').prop('type', 'text').prop('value', this.name);
event.stopPropagation();
event.preventDefault();
let target = $(event.target);
if (target.is('li') && !in_edit) {
tag_item.empty();
tag_item.append(form);
in_edit = true;
}
if (target.is('button') && target.prop('type') === 'submit') {
if(field.val() !== '') {
this.name = field.val();
module.StorageManager.storeTasks();
}
tag_item.empty();
tag_item.text(this.name);
field.val(this.name);
in_edit = false;
}
if (target.is('button') && target.hasClass('removeButton')) {
if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
tag_item.remove();
this.removeTagFromParent();
module.StorageManager.storeTasks();
}
}
}
};
I have some severe memory leaks on my SPA. I managed to localize where the leak is, but I can't fix it. I have a code like this :
$(document).on("click.widget", ".glyphicon-collapse-down", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-down")
.addClass("glyphicon-collapse-up");
kendo.fx(contentElement).expand("vertical").stop().play();
});
I can generate widgets over time on my single page, so I need the buttons to have a handler even if they don't exist yet (every widget come with a button group). When I switch from the current page to another, I delete everything from the page and load a new page with an ajax request. And here is appears the memory leak. I suspect that it might lies in the fact that the handlers are not deleted properly.
EDIT : The leak becomes very smaller when I don't include this script in the app :
//expand the widget
$(document).on("click.widget", ".glyphicon-collapse-down", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-down")
.addClass("glyphicon-collapse-up");
kendo.fx(contentElement).expand("vertical").stop().play();
});
//collapse the widget
$(document).on("click.widget", ".glyphicon-collapse-up", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-up")
.addClass("glyphicon-collapse-down");
kendo.fx(contentElement).expand("vertical").stop().reverse();
});
//remove the widget and updating the layout accordingly
$(document).on("click.widget", ".glyphicon-remove", function (e) {
var contentElement = $(e.target).closest(".widget");
var ancestor = $(contentElement).parent();
var rightColumn = $("#right-column");
var mainColumn = $("#main-column");
kendo.unbind(contentElement);
kendo.destroy(contentElement);
$(contentElement).fadeOut().remove();
// //Widget layout modification on remove
if ((rightColumn.items().length - 1 == 0) && (ancestor.attr("id") == "right-column")) {
if (mainColumn.items().length == 1) {
$("#main-column").removeClass("col-lg-6").hide().addClass("col-lg-12").fadeIn();
}
else if (mainColumn.items().length > 1) {
var firstWidget = mainColumn.items().last();
$(firstWidget).hide().prependTo("#right-column").fadeIn();
}
}
if ((mainColumn.items().length - 1 == 0) && (ancestor.attr("id") == "main-column")) {
if (rightColumn.items().length == 1) {
$("#right-column").removeClass("col-lg-6").hide().addClass("col-lg-12").fadeIn();
}
else if (rightColumn.items().length > 1) {
var firstWidget = rightColumn.items().last();
$(firstWidget).hide().prependTo("#main-column").fadeIn();
}
}
});
//Enable the widget fullscreen
$(document).on("click.widget", ".widget-fullscreen-on", function (e) {
var contentElement = $(e.target).closest(".widget");
contentElement.addClass("fullscreen");
$(e.target)
.removeClass("glyphicon-resize-full")
.removeClass("widget-fullscreen-on")
.addClass("glyphicon-resize-small")
.addClass("widget-fullscreen-off");
});
//Disable the widget fullscreen
$(document).on("click.widget", ".widget-fullscreen-off", function (e) {
var contentElement = $(e.target).closest(".widget");
contentElement.removeClass("fullscreen");
$(e.target)
.removeClass("glyphicon-resize-small")
.removeClass("widget-fullscreen-off")
.addClass("glyphicon-resize-full")
.addClass("widget-fullscreen-on");
});
//Inserts a widget into the page content and modifies the layout accordingly
function insertWidget(jtext) {
jtext.attr("id", "");
if (($('#main-column').items().length == 0) && ($('#right-column').items().length == 0)) {
if ($("#main-column").hasClass("col-lg-12")) {
$(jtext).hide().prependTo('#main-column').fadeIn();
}
else if ($("#right-column").hasClass("col-lg-12")) {
$(jtext).hide().prependTo('#right-column').fadeIn();
}
}
else if ($("#main-column").hasClass("col-lg-12")) {
$("#main-column").removeClass("col-lg-12").addClass("col-lg-6");
$(jtext).hide().prependTo('#right-column').fadeIn();
}
else if ($("#right-column").hasClass("col-lg-12")) {
$("#right-column").removeClass("col-lg-12").addClass("col-lg-6");
$(jtext).hide().prependTo('#main-column').fadeIn();
}
else if ($('#right-column').items().length < $('#main-column').items().length) {
$(jtext).hide().prependTo('#right-column').fadeIn();
}
else {
$(jtext).hide().prependTo('#main-column').fadeIn();
}
}
My code was working fine but they wanted to change my code....
they wanted to attach setValue and getValue added directly to
footballPanel instead of sports grid,
but after adding it the code is not working fine...
can you tell me why its not working....
providing my modified code below...
the UI action here I am performing is there are two radio buttons,
when I click each radio button two different grids open
in one of the grid we add value, when i switch back to another radio
button the values in another grid disappears but it should not
disappear...
after I modified the code the values disappear, can you tell me why?
Only part of modified code here
else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}
}
Whole modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
**if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}**
}
},
Working code without modification
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
sportsGrid.holdValue = sportsGrid.store.data.items;
sportsGrid.store.loadData([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},
getValue() is not a method of ExtJS Panel class.
The change in your code, from sportsGrid (Ext.grid.Panel) to footbalPanel (Ext.panel.Panel) won't work, because they are from different classes and therefore have different properties and methods.
If you want this code to work, you'll need to implement getValue() and setValue(). For example, something like:
On FootballPanel class:
getValue: function () {
return this.down('grid').store.data.items;
},
setValue: function (newValue) {
if (!newValue)
newValue = new Array();
this.down('grid').store.loadData(newValue);
},
And use your modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},