I use Ext JS, so
I have a toolbar with items (buttons, labels etc). I add elements to the toolbar like this :
toolbar.add(this.tempObject);
or like this:
toolbar.add({
xtype: button,
...
});
So, I want to find some elements in this toolbar by field "ref". I tried to:
toolbar.items.find(new Function("there should be my function, but i have no idea how to write it"));
And there is no promice that every element in this collection will have this field.
Use the findBy method:
toolbar.items.findBy(c => c.ref == 'the value you want');
There are other methods for talking about child items on containers, however it depends on the Ext version and what you're looking for.
Related
I am using nested data trees in Tabulator.js and if I use the option dataTreeStartExpanded:true all nested rows will be expanded. I want only one be expanded on load/render? Is that possible?
Here is working jsFiddle to play around.
I found that there is a div with class tabulator-data-tree-control-expand or tabulator-data-tree-control-collapse. Changing the name in dev tools does nothing.
Currently it looks like
But I want to be like that after the web page loads
Maybe I can somehow click the + to expand. Tabulator has a listener there
But I do not know how to call it for that particular +.
oh, I found it in documentation.
.. a function that will be passed in a row component and the level of that row in the table (starting at 0), it should return a boolean value to indicate the rows expansion state:
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeStartExpanded:function(row, level){
return row.getData().driver; //expand rows where the "driver" data field is true;
},
});
and then in data you have to use new property driver:true
I have many documents in Notes, all of the documents have a different form, like this picture :
(possibly like pic 1, pic 2, or pic 3)
How can I write the code in Xpages?
use the "computed field"? Or use the "input text"?
I used the "input text".But only for one item, not for all.
var doc = purchase.getDocument();
var A0 = doc.getItemValueString("DAY_A0");
if(A0 != 0){
return "Division processing";
}
If the form not only has one item, like the pics. How can I write the code to append all of the items?
I'm making the following assumptions here:
You have 10 fields in the document with numbers that might or might not be > 0
The 11th value (Total) shall be computed
You want to show one document at a time, not a list
You know how to add a data source to a page
Version 1:
Create a regular XPages form, use the wizard when adding the document data source. It now would show also the field with 0 values
Click on each ROW and change visibility property to computed (make sure you hit the row, not the cell or field) and add a visibility formula based on the field oof that row. Something like doc.DAY_A0 > 0
Add a computed field where you add the values of all 11 fields
done
Version 2:
in the page open event, get a handle on the document and compute a scoped variable that only contains the values you are interested in. Could be messy since you need a label (that is not your field name) and a value
Use a repeat control to render the values
Hope that helps
I am using px-data-table in an Angular2 application.
The data-table is used as follows:
<px-data-table #myTableRef [tableData]='tableDetails' language="en" (px-row-click)="selectedChanged($event)" (px-select-all-click)="selectAll($event)" sortable selectable show-column-chooser>
<px-data-table-column *ngFor="let header of headers" type="html" name="{{header.value}}" label="{{header.label}}" [disableHide]="header.disableHide" [hide]="!header.disableHide">
</px-data-table-column>
</px-data-table>
The user selects more than one rows. So selectedChanged($event) is fired and multiple rows are selected. Now I'd like the selected rows to be unchecked from code not via user interaction. I went with the following approaches (which did not work):
Fire event 'px-select-all-click' from Angular by:
this.myTableRef.nativeElement.fire('px-select-all-click')
this.myTableRef.nativeElement.fire('px-select-all-click', this.myTableRef.nativeElement.selectedRows)
// also did a ChangeDetectorRef.detectChanges() after injection but it did not work.
Select the checkbox with id 'selectAllCheckbox' from Angular by:
this.myTableRef.nativeElement.shadowRoot.querySelector('selectAllCheckBox')
this.myTableRef.nativeElement.querySelector('selectAllCheckbox')
//returns null in both cases so I can't do a .click() on it
Empty the selectedRows attribute:
this.myTableRef.nativeElement.selectedRows = [];
All three methods don't work.
I was looking inside the aha-table.html imported inside the px-data-table.html and found a convenient method: _setAllRows(e) which unselects all the rows with _setAllRows(false). If only this was exposed or I could call this from Angular, I'd have my solution to the problem: unchecking the selected rows.
Any solutions would be helpful.
After noticing that the _setAllRows(e) is a method of aha-table which is a component nested under px-data-table component, accessing the method is easy according to the Polymer documentation for Local DOM API.
let tableRef = this.myTableRef.nativeElement;
tableRef.$$('aha-table')._setAllRows(false);
Basically $$('selector') is the Polymer shorthand for dynamically created nodes. If I get the reference for the aha-table node, I can call its methods.
I wonder if there is a way to make #Html.Kendo().MultiSelectFor() with no datasource and add items to it dynamically, simillar to the input for adding tags here on StackOverflow?
It would accept a model property with type IEnumerable:
#Html.Kendo().MultiSelectFor(model => model.Tags)
and accept the values through jQuery, something like:
$("#Tags").items.add("tag1");
I would appreciate if someone can advise on other Kendo widgets that allow quickly add and delete items in multivalue input.
You can add/insert new items to the dataSource that the multiselect uses and thus they will become part of the collection as the other initial items.
e.g.
var ms = $("#select").data('kendoMultiSelect');
ms.dataSource.insert(0,{text:"some text",value:"333"})
http://jsbin.com/uWEvulEn/2/edit
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.