ExtJS - Combobox with Date Picker - extjs

How would one configure a combobox component to contain both store-bound items, as well as a calendar picker in the display field (for manual entry)?

It isn't really clear but what you want exaclty but you can override the createPicker method on the combobox. That way you can put anything in the picker.
e.g. a container with a vbox layout containing a calender picker and a grid/boundlist
I have done something similar once. I have one where I've overridden the picker to contain a tree. You just have to return the component and bind actions. (itemclicks etc)

Related

Ag-Grid keep custom filter open during interaction with dropdown

I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.
How can I keep the filter component to stay open on selection of option from dropdown?
Reading the docs more, I found the answer here:
https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element
Custom Filters Containing a Popup Element
Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.
There are two ways you can get fix this problem:
Add a mouse click listener to your floating element and set it to
preventDefault(). This way, the click event will not bubble up to the
grid. This is the best solution, but you can only do this if you are
writing the component yourself.
Add the ag-custom-component-popup CSS
class to your floating element. An example of this usage can be found
here: Custom Date Component

Can I use a DateTimePicker from #material-ui/pickers without having to render a TextField?

I would like to use the DateTimePicker component from #material-ui/pickers without having to render a TextField. In the designs for the feature I am working on, the date picker is brought up by pressing a button, not a text field.
It seems that the picker is always rendered as a TextField. When focused, the actual date/time picker shows up.
The documentation shows an example of how to programmatically open the picker https://material-ui-pickers.dev/guides/controlling-programmatically. The problem is that it still comes with a TextField.
I have also seen you can use individual pieces of the picker like Calendar or ClockView to build your own. Ideally, I'd rather avoid reinventing the wheel as much as possible.
Thanks!

Data not sync in ColumnTemplate in ShieldUI Grid component

I got two questions about ShieldUI grid component.
Q1. when editing is enabled, you need to click cell to toggle edit/display mode. Is it possible to make it always showing editor component?
Q2. When I attach ShieldUI components like numeric text box or date picker to ColumnTemplate, no matter how I change the value in custom UI component. It doesn't sync the value showing in the component back to data source in the Grid. Do you know the solution for my above issues?
Thanks.

How to make an extjs grid a form field?

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.

how do i determine the label for a checkboxrow in bootstrap for yii?

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.

Resources