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.
Related
Does the fuelux datagrid support adding additional filter options? I would like - for instance - to add (next to the filter dropdown you already have in place), a checkbox which should also be added as a parameter to my function that retrieves the data remotely from the server.
It would be nice if the grid would automatically take any parameters from input elements that we can mark by adding a specific class or data- attribute.
Thanks very much! :)
David.
You can absolutely do this.
Add filtering logic to the datasource you provide, keyed off any custom property you add to the datasource.
Add the checkbox within the datagrid markup (or anywhere).
When your checkbox is clicked, update the custom property on your datasource and then call $('#MyGrid').datagrid('reload') to tell the datagrid to reread your datasource
In my application's viewport i'm showing the form panel with a list of fields in center region and property-grid in east region.
I need to show the list of properties of the field in the property-grid on selection of the field.
The user is able to change the properties.
Now my requirement is to apply the properties dynamically to the field.
Is there any generic way to achieve this?
Can someone help me?
Some properties have getter and setter functions, but not all of them and I doubt they are consistent enough for what you are trying to do.
My suggestion would be to store the config object for each field, the config object would have each property that you want to be able to change using your property grid. When a property changes, remove the field from the form. Re-create it using Ext.create and passing your config object as the second parameter. Then just insert the object back into the form.
EDIT: You can probably skip using Ext.create by using the insert function on your form panel, it seems to be able to accept a config object directly.
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within 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.
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.