I'm working with an ExtJS 4 propertygrid that can list three different kinds of items that display when clicked on in another grid. One kind of item has to have a particular field hidden, so that it is't shown but any updates caused by editing other fields aren't affected by potentially missing information.
Attempts of using hidden/isHidden/visible/isVisible, with quoted and unquoted true/false values, haven't worked, and show the ShapeLength field in the propertyGrid.
Is there a "hidden: true" setting within the sourceConfig that I can apply somehow?
Example code:
var lengthDisplayName = '';
if(record.data.Type_ID == 'Circle(s)'){
lengthDisplayName = 'Radius (mm)';
}
if(record.data.Type_ID == 'Triangle(s)'){
lengthDisplayName = 'Side Length (mm)';
}
detailsGrid.sourceConfig['ShapeLength'] = {displayName: lengthDisplayName, type: 'number'};
if(record.data.Item_No == '-1'){
detailsGrid.sourceConfig['ShapeLength'] = {
displayName: lengthDisplayName,
type: 'number'
//, hidden/isVisible/visible value set here
}
};
No there is no hidden property for sourceConfig. But one possibility is to remove the property from the sourceConfig and reinsert it if it should be visible again.
delete detailsGrid.sourceConfig['ShapeLength'];
Was directed to an answer by a colleague - I can getRowClass within the propertyGrid and apply a hidden style on source data for an identifying property and the row name to hide, or else return out:
detailsGrid.getView().getRowClass = function(row) {
if(detailsGrid.source['Item_No'] == '-1' && row.data.name == 'ShapeLength')
return 'x-hidden';
return;
};
Related
My purpose is to translate interactively a checkbox action into a couple of values "0001" or "".
I placed this method on a table whose name is Notification.
// BP Deviation Documented
edit NoYesId provenWarranty (boolean _set = false, NoYesId _provenWarranty = NoYes::No)
{
NoYesId provenWarr;
;
// set value
if (_set)
{
if (_provenWarranty)
this.Func_Status = '0001';
else
this.Func_Status = '';
return _provenWarranty;
}
// read value
if (this.Func_Status == '0001')
return NoYes::Yes;
else
return NoYes::No;
}
This method is used by a Checkbox in a Form with this Table as a Datasource.
This method has been cached in the Notification datasource init() method.
Notification_ds.cacheAddMethod(tablemethodstr(Notification, provenWarranty));
My problem is that the Checkbox is constantly flickering, is there a way to avoid that ?
Update
The flickering appears inside the Checkbox design, but without
toggling it between checked or not.
This problem appears even if the Checkbox is connected to a basic
datasource field, not only if connected to an edit method.
It seems that the more fields there are in the datasource, the more
flickering I get.
I have a bunch of panels out of which one does not have a form. While navigating between the panels I need to check if the form.isDirty(). Obviously it works fine as long as I don't hit the panel with no form on. Its a card layout and I am currently using:
Ext.getCmp('content-panel').getForm().isDirty()
I need to check before executing this line if the panel actually has a form. Is it possible to do this in ExtJS 4?
This code is working for requirement,we can access the 'form' property of the panel.If the panel contains the form then this Property return the form object in return and if the panel doesn't contains the form it return the 'undefined' which satisfied your requirement.
var formFlag = Ext.getCmp('content-panel').form;
if(formFlag === undefined){
console.log('form is absent');
}else{
console.log('form is present');//formFlag is the form object in this case
}
The component query should help you to check if there is a form inside the panel and you have to check if the panel is a form
var panel = Ext.getCmp('content-panel');
//Check if this is a form
var isForm = panel.form
//Check if an inner panel is a form
var hasForm = panel.query('form');
if(isForm && hasForm.length > 0){
//Is or has a form
}
Found a workaround. Posting just in case if anyone else might be looking for same thing.
I split my statement in following
var formCmp = Ext.getCmp('content-panel'); and then
called formCmp.getForm
Note: getForm and getForm() return different values.
In my application I hava combobox which is holding some values from databse ( some real time updated list ). This ComboBox list is updated every 1 minute.
List dosen't have null values. When I'm setting this list to ComboBox..
ComboBox box = new ComboBox(items);
.. there is one extra "empty" row, which is perfectly fine because non value is selected.
Right after I'm selecting some value my "empty" value disappears from the list.
My main question is How to keep this value on the list?
Why this is a problem..
Scenerio values is selected in database, first application start
List is loaded ( wiht selected empty value ).
Value is selected.
During first background refresh, empty values disappears, and combobox value is selected to n+1, next value is selected.
If I want to select empty values I have to all clearSelection from selection model / by some extra control.
While it is an old question, I spent quite bit of time trying to solve the same issue in my application and thought i might as well add my solution here.
One possible workaround is to create an extra list that contains null and the items you wish to be selectable.
ObservableList<String> selectableActivities = FXCollections.observableArrayList("a", "b", "c");
ObservableList<String> selectableActivitiesWithNull = FXCollections.observableArrayList();;
selectableActivitiesWithNull.add(null);
selectableActivitiesWithNull.addAll(selectableActivities);
In order to support updates of the original list you would need a ListChangeListener that updates the extra list according to changes in the original list.
selectableActivities.addListener((ListChangeListener<String>)(change -> {
while (change.next()) {
if (change.wasPermutated()) {
selectableActivitiesWithNull.sort((a, b) -> {
return Integer.compare(selectableActivities.indexOf(a), selectableActivities.indexOf(b));
});
} else if (change.wasRemoved()) {
selectableActivitiesWithNull.remove(change.getFrom()+1, change.getTo()+2);
} else if (change.wasAdded()) {
selectableActivitiesWithNull.addAll(change.getFrom()+1, selectableActivities.subList(change.getFrom(), change.getTo()));
} else if (change.wasUpdated()) {
for (int i = change.getFrom(); i < change.getTo(); ++i) {
selectableActivitiesWithNull.set(i+1, selectableActivities.get(i));
}
}
}
}));
And finally you use the extra list for the ComboBox items.
ComboBox<String> combobox = new ComboBox<String>();
combobox.setItems(selectableActivitiesWithNull);
Now you can modify the original list as usual and the ComboBox will update accordingly while also having an empty selection as the first item. And most importantly your original list will not be polluted by placeholder objects that could cause issues in other parts of the application.
This will also work with other objects, assuming that you add an apropriate StringConverter to the ComboBox. Note that the converter must also be able to handle null values if using the above approach.
StringConverter<Object> activityConverter = new StringConverter<Object>() {
#Override
public String toString(Object object) {
return object != null ? object.toString() : "";
}
#Override
public ActivityDataRow fromString(String string) {
return null;
}
};
combobox.setConverter(activityConverter);
While this approach is not exactly what you desired, I believe this is a close you can get without implementing a custom combobox.
Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'
in my editorGrid i have one column with dateField editor , when the grid is rendred i set that field to non editable :
myColModel.setEditable(colIdex,false)
it will be editable after the value changed in other cell in the same row
myColModel.setEditable(colIdex,true)
the probleme is : all the cells in the column are editables
how can i do to make only the cell in the selected row editable
and many thanks
Use the 'beforeedit' listener on the EditorGrid - you can inspect the field they are trying to edit. If the other field isn't set, return false to not allow them to edit that field.
Basically you can create conditional logic and hide the edit buttons based on the row model.
dataBound: function (){
var grid = this;
var trs = this.tbody.find('tr').each(function(){
var item = grid.dataItem($(this));
if( item.UnitPrice % 5 == 0) {
$(this).find('.k-grid-edit,.k-grid-delete').hide();
}
});
},
You can do it other way by just overriding the isCellEditable function.
Check the below link.
http://www.sencha.com/learn/Ext_FAQ_Grid#Disable_editing_of_particular_rows.2C_columns.2C_etc