I'm usign Extjs 6. I extended a class from Ext.Component. I want to add the class some events.
How can I do it?
You don't have to declare custom events in ExtJS 6. You simply need to listen to them and fire them.
component.fireEvent("customEvent", component, otherArgs);
Related
I want to create a custom component in Vaadin. But instead of extending it from a Component class I tried as below
public class MyMapComponent extends LMap implements Component {
}
I get error as
getId()' in 'com.vaadin.ui.AbstractComponent' clashes with 'getId()' in 'com.vaadin.flow.component.Component'; attempting to use incompatible return type.
How to resolve this error? What is the best way to achieve it?
Am I going in correct direction? I want add the LMap as component in Vaadin 14. Since v-leaflet does not support above Vaadin 8, I am trying MPR for which I am trying to add LMap as component in vaadin flow.
In Vaadin 8 and older, Component is an interface and AbstractComponent is an abstract class implementing that interface. Creating your own completely custom implement of the Component interface without using AbstractComponent as the base class is rarely feasible because of all the internal bookkeeping that is needed.
In Vaadin 10 and newer, this is taken one step further. There is no separate interface with only one viable implementation but instead, Component itself is an abstract class.
Furthermore, it seems like you're trying to mix the Vaadin 8 AbstractComponent and the Vaadin 14 Component base types in the same class hierarchy. This cannot work since they are explicitly incompatible with each other.
The v-leaflet add-on is not compatible with newer version of Vaadin, but the author of that add-on recommends using https://vaadin.com/directory/component/leafletmap-for-vaadin instead.
I need a ComboBox without this clear button. It confuses the users.
I believe in Vaadin 8 it could be removed with setEmptySelectionAllowed(true);.
How can it be removed in vaadin 10? setAllowCustomValue(false) does not help.
Java 8
Vaadin 10.0.2
I guess the easiest way to achieve that would be with CSS, at least that's how I would do it.
What you want to do is extend the default theme module for VaadinComboBox web component (see https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope), so you can use the following approach:
First, choose a CSS class name, like my-combobox
Next, create an HTML file that will contain the extension of the default theme module for VaadinComboBox web component. Give it a name like my-combobox-theme.html and put it into src/main/resources/META-INF/resources (yes, it's resources twice)
Put the following into that HMTL file:
<dom-module id="my-combobox-theme" theme-for="vaadin-combo-box">
<template>
<style>
:host(.my-combobox) [part="clear-button"] {
display:none !important
}
</style>
</template>
</dom-module>
In the first line you declare that the following CSS is supposed to supplement whatever styles are defined for VaadinComboBox web component.
Then, the only CSS rule that is there defines that whenever there is a VaadinComboBox that has CSS class my-combobox the clear-button part of the web component should not be displayed.
Import the custom module to a view with #HtmlImport("frontend://my-combobox-theme.html"). NB: you need to add this annotation in all views that you want to use the modified ComboBox in. See point 6 for an alternative
Now you're pretty much all set. Whenever you want to have a ComboBox without delete button, just add a class name with comboBox.addClassName("my-combobox")
You probably want to use your ComboBox in more than one place, so a good idea is to create your own class. This gives you a reusable component and takes care of always having the right HTML import for custom style in place:
#HtmlImport("frontend://my-combobox-theme.html")
public class MyCombobox extends ComboBox {
public MyCombobox() {
addClassName("my-combobox");
// Adding the following code registers a listener which
// resets the old value in case the user clears the
// combo box editor manually, e.g. by entering "".
//
// addValueChangeListener(listener -> {
// if(listener.getValue() == null) {
// setValue(listener.getOldValue());
// }
// });
}
}
Since Vaadin 14 you can easily hide/show the clear button with
comboBox.setClearButtonVisible(false);
API documentation
I know you asked for Vaadin 10, but for completeness I wanted to add this here.
This is not possible at the moment but discussed as feature. See the Github issue No way to disallow clearing selected value. You can leave a thumbs up on that issue to emphasize its importance. IMO this is a must-have feature that should be implemented from the beginning.
The roadmap says something about a "Dropdown menu" upcoming in Vaadin 11 in Q3. This could be interesting.
I am using shadow-dom traversal of the clear button component inside the vaadin-combo-box (in this case, id:my-combo), and set the display property. (javascript)
var clear_button = this.$.my_combo.shadowRoot.querySelector("#clearButton");
clear_button.style.display = "none";
Is there a way to change the HTML given by the method render(), on Laravel's pagination?
Note: I solved this creating a helper that uses str_replace, but I don't think this is the most correct way...
Thanks
First you need to create a CustomPaginator Class that extends
Illuminate\Pagination\BootstrapThreePresenter
And override its methods.
I needed a custom class attached pagination with 1 onEachSide instead of 3.
So I did this:
https://gist.github.com/aykutcan/495d43041571854a7507
I've found this library -
Landish/Pagination
- that already brings some paginators and lets you easily create your own.
I would like to build a new component on the basis of PrimeFaces Tab/Tabview components. It should look like an add tab in a browser and open a page for filling out a form. The problem is that I want to integrate it in a TabView based on a data model (http://www.primefaces.org/showcase/ui/tabviewModel.jsf). Right now I can either combine a tab for filling out a form with a tab with predefined data or use a TabView, which dynamically creates tabs for my data.
I have read JSF documentation about creating custom components in two ways - as composite component or as a new Java class. I tried to create a custom component but it does not seem to work the way I described beyond.
My questions are:
1) is it possible to solve this problem with a composite component? If yes, could someone give me a hint?
2) if not, is there a tutorial for writing a new component on the basis of existing PrimeFaces component (presumably new sort of TabView)?
UPD: After doing some research I realized that the easiest way is writing a new renderer for TabView.
I declared a new renderer class:
public class AddableTabViewRenderer extends TabViewRenderer
and registered it in faces-config.xml:
<render-kit>
<render-kit-id>HTML_BASIC</render-kit-id>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.TabView</renderer-type>
<renderer-class>
de.idealo.evaluation.jsf.webapp.component.AddableTabViewRenderer
</renderer-class>
</renderer>
</render-kit>
However, when a view with TabView component is rendered, the encodeEnd method of TabViewRenderer is called, not the overriden method of AddableTabViewRenderer.
Can you give me a hint about where the problem might be?
The renderer-class is wrong in my configuration. I misunderstood the instructions about registering a component. I thought that render-type is the class that will be rendered with the custom renderer. It must be org.primefaces.component.TabViewRenderer instead. Now it works fine :)
I have common code that I want in various events for our standard jqGrid configuration.
I use $.extend($.jgrid.defaults, { }); to set some code for the following:
loadError()
beforeRequest()
loadComplete()
gridComplete()
Now, when I define an instance of my grid, there is a potential that I would like to execute more code in any of these events.
My initial solution was to have global variables, e.g.: loadCompleteEx() and if they are defined, call them at the end of the default method calls. This was great if I only had one grid on the page, but I am trying to implement a solution that would work regardless of how many grids are on the page.
Is there some way to hook in and add a method to execute when any of these events are fired? I'm using jqGrid 4.1.2 and jQuery 1.6.
Thanks in advance for your help!
You can .bind() your own functions to events, so that your function executes with the event. You could use this to bind different events to each grid, or bind one function to every grid at once.
.bind() also allows binding to standard javascript events, custom events, or even undefined strings which you later call with .trigger().
It needs to be attached after a selector, which can select a specific grid or multiple grids in your case.
$('#Your-Grid-Selector').bind('eventToBind', functiontoBind() {
alert('Triggered eventToBind');
});
jQuery Documentation
Edit: This question may be a duplicate of this SO Question, which has a good solution you can use for this very issue.