I'm working on custom component, which will contain combo and displayfield. It's supposed to be a combobox with validation message next to it.
I'm wondering, from which base class to derive that one in order to have such functionality like store binding ect?
Why don't you use standard ExtJs validation mechanism? It will produce exact outcome you want - a label next to the combobox.
Eventually I found that it can be a simple Ext.panel.Panel.
Related
I am trying to set up a reusable custom control with a combobox to be used with Bootstrap. The custom control has already all the divs, styles etc. that are needed for Bootstrap.
Now, I added a Property Definition (type: string, Allow multiple instances), so that when you use the custom control on any form, you can add selectable values to the combobox:
As a values property for the combobox, I added a computed item with the following JavaScript:
compositeData.listValues
When I use the custom control I can add values individually, one instance for one selectable value and it does work great:
However, when I compute the value to, lets say, get a list of values from a keyword document or view column:
the combobox value list looks like this:
How can I pass on a list of values thru property definition to the combobox? Is it possible at all?
UPDATE: Is there a way to loop thru the instances of a property definition? That way I could check if the current instance is a single text value or an array, put a list of all the values together and return it as a value list.
Thank you very much for your help!
In the Custom Control properties, next to Type, leave it as String and then click on the folder icon. In there you can choose complex types.
In there you can choose view column, among a vast array of choices.
UPDATE: David Leedy pointed out a caveat in regards to using comma as a separator for #Implode/#Explode. This could cause issues, if any of your values contains a comma. So, I amended my answer to account for that:
First of all, I'd like to thank everyone who took a look at this question and / or responded to it.
I had an epiphany this morning and found a solution. Might not be very elegant but it works.
As we are going to use #Implode/#Explode to build the value list for the combobox, we need to add another property definition to the reusable custom control. This property will be used to pass on the information, how the computed value list will be separated:
When I add values to the custom properties, the computed value for getting the list of values from a keyword document should look like this:
var oView:NotesView = database.getView('$vwSYSLookupKeywords');
var oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile', true);
#Implode(oDocument.getItemValue('iTxtTest'),';')
As you can see, in this example I use ";" to implode the list.
This is now my list of Custom Properties:
And this is the markup for the whole custom control where I use the reusable custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccLegend
listSeparator=";">
<xc:this.listValues>
<xp:value>Test 1</xp:value>
<xp:value>Test 2</xp:value>
<xp:value>#{javascript:var oView:NotesView =
database.getView('$vwSYSLookupKeywords'); var
oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile',
true); #Implode(oDocument.getItemValue('iTxtTest'),';')}</xp:value>
</xc:this.listValues>
</xc:ccLegend>
</xp:view>
If I now use the following in my computed value list for the combo box:
var sSeparator = compositeData.listSeparator;
#Explode(#Implode(compositeData.listValues, sSeparator), sSeparator);
the values are properly displayed in the combobox:
This does also work with #DBColumn and #DBLookup!
If you have a better solution, please do not hesitate to post it here.
Did you try to set the property to object instead of string. That should allow you pass an array to the custom control with imploding and exploding it.
I have a requirement to create a custom form field that is basically an extjs grid. The user should be able to click a result in the grid. This clicked result should then become the fields value. Also, this field needs to extend Ext.form.field. Here's what I got:
Ext.define('MyApp.field.Grid', {
alias: 'widget.GriedField',
extend: 'Ext.form.field.Base',
I'm a lot of confused on how to add a grid to form field base. Looks like form field base's template expects HTML. How do I get it accept a component?
If you just need to select a value from a list of items. Why not use a combobox?
If you need to select multiple items. There is an example of how to use the MultiSelect ux component in the documentation examples.
http://docs.sencha.com/ext-js/4-1/#!/example/multiselect/multiselect-demo.html
If you really must use a grid. Then I wouldn't bother with trying to create a field type and cause yourself grief.
Add a listener to your grids selectionchange event and update a hidden field in your form with the value you want from the grid. Job done.
I ended up putting the grid on a form indirectly through creation of dependencies on my model.
My model has master-detail, which the detail is just a store reference. I found that using associations did not work for me.
So, in adding a field to a form, I have something that manages changed events for the model (master record) and the detail stores.
hello i'm having problems with the labels of checkboxes. when i use more than one model of the same class in a single view the checkboxes seem not to use the names from attributeLabels of that model.
i.e. if i have this in my view:
$form->checkBoxRow($colorArray['left'],'[left]special_request');
the checkbox get rendered with a label "[left]special request" instead of "Special Request" as stated in the attributeLabels of the Color model.
on the other hand dropdown lists, text field, etc are rendered correctly.
i have noticed this bug/feature after updating bootstrap from version 0.9.12.r211 to 1.0.0.r296.
The checkBoxRow and all methods ended with Row get the label from the array returned by Model->attributeLabels().
You can either change the autogenerated labels or use the TbLabel widget.
Choose the best for your issue.
I've stumbled on an issue with Comboboxes in javafx2.2. This is the scenario:
Users click on the 'editFile' button.
Another pane becomes visible (with the setVisible method).
This pane contains 6 comboboxes.
Three of them have fixed items: cboReport, cboSales, cboSend. Three of them get their data from a db (ObservableList) and get populated when the pane becomes visible: cboFile, cboCustomer, cboVet
The user selects a file number from the cboFile. The rest of the comboboxes are beeing set with the correct values.
The user presses the save button, the file gets saved as intended.
Next the user presses a close button.
When the window closes, the data on the pane gets resetted through a resetGUI_editFilePane() method. There is have lines like:
...
cboReport.getSelectionModel().clearSelection();
cboSales.getSelectionModel().clearSelection();
cboSend.getSelectionModel().clearSelection();
cboFile.getSelectionModel().clearSelection();
cboCustomer.getSelectionModel().clearSelection();
cboVet.getSelectionModel().clearSelection();
cboFile.getItems().clear();
cboCustomer.getItems().clear();
cboVet.getItems.clear();
...
When the user opens the pane again by pressing the 'editFile' button I notice that only the 'fixed item' comboboxes have cleared their selection, the dynamicly filled comboboxes show the last selected item although the value from the selection itself is null. This looks like a graphics bug to me or am I doing something wrong?
Is there any way around this issue or what is the best method to reset a combobox?
EDIT 2014/08/27:
This is officially not a bug(clearSelection() does not clear value):
https://bugs.openjdk.java.net/browse/JDK-8097244
The official "workaround" is to clear the value of the ComboBox after clearing selection.
cb.getSelectionModel().clearSelection();
// Clear value of ComboBox because clearSelection() does not do it
cb.setValue(null);
It is very simple. You just need to work with the value property of ComboBox. here you go ....
ComboBox c;
c.valueProperty().set(null);
I hope this works for you :-D
I ran into nearly the exact same situation and came across your question while looking for a solution. Fortunately, I came up with a workaround that forces the ComboBoxes to reset. When you reset the data on your pane, instead of doing something like:
cboVet.getSelectionModel().clearSelection();
cboVet.getItems.clear();
do something like this...
parentNode.getChildren().remove(cboVet);
cboVet = new ComboBox(); // do whatever else you need to format your ComboBox
parentNode.add(cboVet);
You'll also need to do a setItems() again on your ComboBox so the new one will be populated. This is not an ideal solution but it seems to be working as I expect the provided clearSelection() method would.
You can retrieve the items and have them all removed:
cboVet.getItems().removeAll(cboVet.getItems());
I've just tested a working solution with the Java JDK 1.7.11:
combobox.setSelectedItem(null);
combobox.setValue(null);
Hope it helps :)
I use reflection with direct manipulation of buttonCell field in ComboBox skin:
#SuppressWarnings({ "rawtypes", "unchecked" })
public static <T> void resetComboBox(ComboBox<T> combo) {
Skin<?> skin = combo.getSkin();
if(skin==null){
return;
}
combo.setValue(null);
Field buttonCellField;
try {
buttonCellField = skin.getClass().getDeclaredField("buttonCell");
buttonCellField.setAccessible(true);
ListCell buttonCell = (ListCell) buttonCellField.get(skin);
if(buttonCell!=null){
StringProperty text = buttonCell.textProperty();
text.set("");
buttonCell.setItem(null);
}
} catch (NoSuchFieldException
| SecurityException
| IllegalArgumentException
| IllegalAccessException e) {
e.printStackTrace();
}
}
I think it's also possible by providing your own buttonCell implementation through buttonCellFactory property
I had the same problem with a ComboBox. The buttonCell of the ComboBox is not updated correctly when I change the items of the ComboBox. This looks like a graphics bug.
I use direct manipulation of buttonCell field in ComboBox.
combo.getButtonCell().setText("");
combo.getButtonCell().setItem(null);
This is the best solution I've found without recreate the ComboBox.
To clear SelectionModel I found nothing better than creating a new instance of Combobox (previous answers update):
myParentNode.getChildren().remove(myCombobox);
myCombobox = new ComboBox();
myParentNode.add(myCombobox);
But this solution evolves other problems: if you use fxml, this combobox will be placed in the wrong place and with wrong parameters. Some fxml parameters are hardly reproduced directly from your controller class code and this is awful to do it every time you need to clear the combobox.
The solution is using custom components instead of creating instances directly in main controller class code, even if these components are standard. This also helps to free some lines in your main controller class by moving component related event methods and other methods to a separate class file, where you use a reference to your main controller class.
How to create custom components in JavaFX FXML Application can be found in http://docs.oracle.com/javafx/2/fxml_get_started/custom_control.htm , but note that CustomControlExample class is not needed for every custom component in your application, if it already has an entry point class with start(Satge stage) method.
How to resolve possible errors with reference from custom component controller class to main controller class can be found in JavaFx: how to reference main Controller class instance from CustomComponentController class?
I need to clear selection of the combo box. And this code worked for me:
List<Object> list = new ArrayList<>(comboBox.getItems());
comboBox.getItems().removeAll(list);
comboBox.getItems().addAll(list);
I have a basic form inside a window. This form has several check boxes and I need to some how be able to select all with another checkbox. How am I supposed to access these checkbox types. I am trying to get reference to "this" and then this.getForm().getFieldValues() but is there a better way to do it, as I only need to get the checkboxes and not other fields.
Thanks,
SS
By default ExtJs fields don't have a getForm() method to get access to their parent. However, you can use this override to add this method. Once you've got the form, you can get access to any field you like, which should let you do what you describe.