I'm on ExtJS 4 and using an MVC approach. I've created a simple grid view class, and have added a componentquery type 'ref' to that view in my controller. Within the initial grid view itself I set several columns to be hidden and some to be visible by default. The rendering of the grid with those settings is all working fine.
Then I have a button that, when clicked and based on some other conditions, will make some of the initially hidden grid columns visible. This works as well.
But what I need is a way to later 'reset' the grid to its initial view (with the correct columns hidden/visible, as they were initially).
I've tried various permutations of the following with no effect:
var theGrid = this.getTheGrid();
theGrid.reconfigure(store, theGrid.initialConfig.columns);
theGrid.getView().refresh();
I suppose I could loop through every column and reset its 'hidden' state, but would think there's a way to just 'reset' back to what's set in the class? Advice?
SOLUTION UPDATE
Appreciate the pointer from tuespetre. For anyone coming along in the future looking for specifics, here is what was needed (at least for my implementation):
Within the view, moved the column defs into a variable
Within the view, columns ref within the class becomes:
columns: myColumns,
Within the view, the following function created within the class:
resetGrid: function(){
this.reconfigure(null, myColumns);
},
Within the controller:
var theGrid = this.getTheGrid();
theGrid.resetGrid();
You will just need to create a function on your view class to encapsulate that functionality.
Related
I was using Event aggregate publish method to update view from another view. when I created publish and subscribe data was able to get in view model , but that is not updating in view with assigned variables. If I use JavaScript to fill value it's working but not able to trigger validate controller.
Expected result is:
From the subscribe method I have to fill the view values.
After that it should trigger validate on value changes.
In below gist run I have two view and view-model. One is registration-form and second one is data-form. In data-form I have table with data, on click of each row I am publishing one event with selected row data, and this published event I was subscribing in side of registration-form view-modal. For more details look into below gist run.
Gist run: https://gist.run/?id=8416e8ca1b9b5ff318b79ec94fd3220c
Two possible solutions: (to your "undefined" alert)
Change alert(this.email); to alert(myself.email);
Use the thick arrow syntax for the subscribe function. Change:
this.ea.subscribe('MyrowData', function(obj){
to
this.ea.subscribe('MyrowData', obj => {
This syntax allows the new function to preserve the context/scope of the parent, which means that this.email will still be accessible.
Another suggestion:
You could simplify your data-form.js function as follows:
Change:
this.eventAggregator.publish('MyrowData', this.items[this.items.indexOf(item)]);
to:
this.eventAggregator.publish('MyrowData', item);
This will work because you've already provided item in your function call click.delegate="PopulateData(item, $event)".
In fact, you could even delete $event and event from the two PopulateData definitions (in data-form.js and data-form.html).
When I implement these suggestions, your data is also validated correctly.
It is my first time asking here, sorry if i do something wrong (also not in my mother tongue).
Recently, i moved from Swing&AWT to JavaFX.
I am discovering the new Table which is quite different from the Swing version. Better i would say, it needs less operation and do more things, but ... lord, it's way more difficult to understand !
I am currently trying to modify the TableView dynamically. While the addColumn method is not a big challenge, i need help for my deleteColumn method :/
Let's talk about my problem :
I have a scene with many components on it (panes, buttons, menus, ...) and one pane (actually an anchorpane) hosts a TableView.
I would like to dynamically delete an entire column when this operation occurs :
The user right clicks on the TableView > a contextual menu shows up > he selects the item "delete"
So, basically a contextual menu that offers the option to delete the column where the user right-clicked.
I tried this :
-> When the user right-clicks on the TableView, this method is called :
public void setTargetForContext(ContextMenuEvent event){
if(event.getTarget() instanceof Label){
ObservableList list =(((Label)event.getTarget()).getChildrenUnmodifiable());
activeColumn = ((Text)((ObservableList)list)).getText();
}...
And the goal was to set the column name in "activeColumn".
Then, when the user will select the "delete" option from the contextual menu, another method would be called to compare the name of the columns and delete the right one.
But it seems that i can't call a getChildren() method on the label, only an unmodifiable one. And it does not allow a cast and throw the exception.
Do you have a solution to allow me to get the column name ?
Or maybe i am going the wrong way and i have to find another way to delete the right-clicked column, but in this case i will need your help too.
Thanks a lot for reading, and thanks in advance for your help.
First, let me point out that if you call
table.setTableMenuButtonVisible(true);
then the table will have a built-in menu button with radio buttons allowing the user to select which columns are displayed. Maybe this is all you need.
In Swing, the renderers for table cells are just "rubber stamps" that are painted onto the table. Thus you can't register listeners for UI events with them.
By contrast, in JavaFX, the cells in a table are real UI controls with full functionality. This means there's no real need for API that gets the cell coordinates from a table. You should not register your listener with the TableView, but with the actual cells on which you want to operate. You access the cells from the table column's cell factory.
// the table:
TableView<RowDataType> table = new TableView<>();
//...
// A table column:
TableColumn<RowDataType, CellDataType> column = new TableColum<>("Header text");
// A context menu for the table column cells:
ContextMenu contextMenu = new ContextMenu();
MenuItem deleteColumnItem = new MenuItem("Remove Column");
deleteColumnItem.setOnAction(e -> table.getColumns().remove(column));
contextMenu.getItems().add(deleteColumnItem);
// Cell factory for the column
column.setCellFactory(col -> {
// basically a cell with default behavior:
TableCell<RowDataType, CellDataType> cell = new TableCell<RowDataType, CellDataType>() {
#Override
public void updateItem(CellDataType item, boolean empty) {
super.updateItem(item, empty);
if (item == null) {
setText(null);
} else {
setText(item.toString());
}
}
});
// add the context menu to the cell:
cell.setContextMenu(contextMenu);
return cell ;
});
If you want the context menu to appear in the table column header as well, you just need to do
column.setContextMenu(contextMenu);
i need to display tooltips for my table cells. Are there any plugins for that purposes?
Thanks in advance!
You should be able to use any table and tooltip plugins you want - you just need to trigger the tooltips correctly depending on how you are initializing and updating the table.
For example, if you use jQuery DataTables (which I assume you are looking at given the tag you gave your question) with the jQuery UI tooltip widget you could simply initialize the tooltips once you've initialized the table. If you have the tooltip data already in the table, it could be as simple as:
$('#mytable').dataTable().tooltip();
If you have a more complex table that gets updated (such as using deferred rendering for a giant dataset), then you'd probably need to tie into the row creation callback to get the tooltips on any new rows by doing something like this in the init options:
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('.tooltip', nRow).tooltip()
}
I have a scrollableView with several views inside and I'd like to add item to some of these view if they meet a certain criteria, like if they have data attached or not. Also I'm using Alloy, here's my markup
<ScrollableView id="scrollableView">
<View id="view" class='coolView'></View>
...
</ScrollableView>
To know if there are data attached I check the currentPage attribute like so:
function updateCurrentView(e) {
currentView = e.currentPage;
}
But I have no idea how to add an item to the current View.
Edit: To add some clarification, I have a label which when clicked allow me to choose two currencies, when chosen these currency pairs are saved in the database and should be displayed instead of the label. So my guess was to check whether the current view has currency pair saved.
There are 2 things to take care of here:
1.Whenever a currency is selected,immediately label on that particular view will change.
2.Whenever the scrollableView is loaded,it must always refer to the database if a currency is selected.
First one can be done as:
1.Get the instance of scrollableView using the getView method of alloy controller.Pass the id of the scrollableView to it.Lets call it myScrollableView.Refer this for more info.
http://docs.appcelerator.com/titanium/latest/#!/api/Alloy.Controller
2.Use var currentView=myScrollableView.getCurrentPage() to the get the current page which will be a number.
3.Now use the scrollableView instance to get all the views.
var viewArray=myScrollableView.getViews();
4.viewArray[currentView] will give you the view of current page.After you have got the view you can change the desired label using:
viewArray[currentView].children[positionOfTheView]
The "positionOfTheView" can be obtained by printing the viewArray[i].children array using Ti.API.info.
Second thing can be accomplished as follows:
1.Get the instance of scrollableView using the getView method of alloy controller.Pass the id of the scrollableView to it.Lets call it myScrollableView.Refer this for more info.
http://docs.appcelerator.com/titanium/latest/#!/api/Alloy.Controller
2.Now use the scrollableView instance to get all the views.
var viewArray=myScrollableView.getViews();
3.This is a JavaScript array of all the views in the scrollableView. Now iterate through this array and according to the data in the database,change the concerned view using:
viewArray[i].children[positionOfTheView]
The "positionOfTheView" can be obtained by printing the viewArray[i].children array using Ti.API.info.
I'm using boostrap library on Yii via yii-booster
I've created a relation table view
The related view is a TbGriView itself
Vhen in a row i click on the link on the 'related' column, the row expands itself, and render a TbGridview inside it.
The problem is that the internal gridview cannot be sorte, paged or filtered, because each action on it causes that the entire container grid will empty
Note
- external grid as a id of 'extenalgrid'
- each internal grid has as id like 'internalgrid-$rowId' , so every internal grid as differnt id on div, table and table row elements.
- the action called from "render related tabel" link is using renderPartial without the postProcess option. If i use potProcess, the row will be empty
So is it not possible to rendere a full working gridview/tbgridview into a related table ?
Use different css classes for the filters, buttons and headers for the different tables. From the jquery.yiigridview.js file events are bound to selectors as $('#table-id .selector-class') so elements in your internal gridView still trigger the events bound to the external gridView. You also have to specify a different url for the internal gridView by setting it's ajaxUrl.