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.
Related
I have the need to create the custom form field which need to works like TemplateColumn in gridPanel.
This custom form field will render multiple field in data model using the provided template just like TemplateColumn.
Since i only want to display data using this custom form field in the form panel so i try to extend the display field, but it only accept 1 data field in the model.
How could I make the custom form field accept value from 2 or more data field in model.
Thanks in advance.
you can bind to several fields and also included text
bind: {
value: "{rec.field1} - static text -> {rec.field2}"
}
feel free to add a fiddle to show what you want to do if this is not correct.
I need to implement grid like control that utilizes some complex custom widgets for viewing and displaying rows. Just like this one:
The key point here is that controls in the right column depend on the value selected in the combobox from the left column.
Does anyone know what is the best way to implement it using ExtJS 5.0 components? Should I create my own widgets to display row data that will serve as both custom renderers and editors?
I would use a beforeedit function which changes the editor of the right column (setEditor) to the required widget type depending on what is set in the left column. If you use Editing (RowEdit) plugin instead of CellEditing, you would also have to setEditor in the left column's change or select event.
This is the easiest way, but it won't show all editors at once, of course.
To have all editors displayed at once, I would make a new field containing multiple fields. You can add multiple instances of these fields to a fieldset, container, panel or form at runtime.
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()
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 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.