What I am trying to do is have a "load more" button at the bottom of a ajax populated list. I have got all the code working with a docked button, but I would now like to have it at the bottom.
What is happening is when the listView card is show I see my list but the list won't scroll. It pulls up and down a little but just won't have it. I have tried adding different configurations and layouts to listView with no different.
What I have done is the following
var moreButton = new Ext.Button({
text: 'Load more...',
ui: 'round',
handler: function() {//Do the loading - this works}
});
//In my list config I have a docked top bar for going "back" other than that pretty standard
var list = new Ext.List(Ext.apply(listConfig, {
fullscreen: false
}));
//This is my view for what I am trying to do
var listView = new Ext.Container({
items:[list, moreButton]
});
listView is then added to an other container as it is populated from a search box, it is show with setCard when I get a valid response from the server.
[sencha person] are you on 0.98? I think we had a regression in our scroller. Might want to downgrade back to 0.97
Related
I have an interactive grid in APEX page under same region I have created an Item: "P300_ADD_MODIFY_REASON".
I want to put a validation for that item, which when I did with a PLSQL expression (:P300_ADD_MODIFY_REASON is not null) and Server side condition in validation for Item is null. It is working when I do modification in report and add reason but it doesn't work if I miss to add reason and do modification later, post then when I add reason it gives error. To resolve it I have do some change in report with added reason then it works.
What I understand is, that item which holds value doesn't capture in validation when I try to save page 2nd time.
I am sure there should be some other method to put validation on Item as with column I am able to.
TIA
The issue is that the "Save" button of the interactive grid is used. That will just cause a submit of the interactive grid region, not a full page submit.
The fastest workaround is to create an additional button on the page that submits the page and hide the default save button on the IG. This will also submit the interactive grid changes and submit the page item P4_NEW which will then fire the validation.
To hide the default save button on the interactive grid (since that shouldn't be used), set the IG Region > Attributes > Initialization JavaScript Function to
function (config)
{
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind( "actions2" );
//Hide save button
toolbarGroup.controls.splice(toolbarGroup.controls.indexOf("save"),1);
config.toolbarData = toolbarData;
return config;
}
A cleaner solution is to remove the original "Save" button from the interactive grid and add a new "Save" button with a custom action to submit the page. For that use the following Initialization Javascript Function instead of the one above:
function (config)
{
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup2 = toolbarData.toolbarFind( "actions2" );
//Hide original save button (last array element)
toolbarGroup2.controls.pop();
// Add new button with page submit action
toolbarGroup2.controls.push(
{
type: "BUTTON",
label: "Save",
action: "save",
//icon: "icon-ig-save",
iconBeforeLabel: true,
hot: true,
action: "custom-ig-save"
});
config.initActions = function( actions ) {
actions.add( {
name: "custom-ig-save",
action: function(event, focusElement) {
apex.submit('SAVE');
}
});
}
config.toolbarData = toolbarData;
return config;
}
I have a SwiftUI View that shows a list of items. The view is pretty large so I won't paste the whole thing here. However, the List uses a ForEach:
ForEach(model.items, id: \.id) { item in
myCell(item: item)
}
Everything works fine. What I am trying to do is have a simple slide animation when an item is deleted in the model.
I looked at this answer on stack:
Insert, update and delete animations with ForEach in SwiftUI
However, my setup is different and I am not sure how to try to apply that to my case. In that link the items are stored as a #State property in the view.
My setup is the view uses as #StateObject:
#StateObject var model = MyViewModel()
The model has this:
#Published var items = [MyStruct]()
The List's cells allow the swipe action, the user taps on delete, and the view tells the model to delete that specific item.
The model then has async logic that kicks in and eventually (pretty much immediately) removes the related item from its items. When that happens the List updates, the cell goes away and all works.
I would like to add a cell delete animation. How can I do that given my setup?
EDIT
Trying to add more code to help with context.
The deletion is triggered from an alert like so:
return Alert(
title: Text(title),
message: Text("You cannot undo this action"),
primaryButton: .destructive(Text("Delete")) {
withAnimation {
model.deleteItem(id)
}
},
secondaryButton: .cancel()
)
I added that withAnimation but nothing has changed.
Ok,
so I found what was making things not work even withAnimation.
My model has a call:
model.deleteItem(id)
Internally, as part of the work needed to delete that item, deleteItem(id) uses a Task.init { ... } task. I was then jumping back on main to then update items #Published var items = [MyStruct]() in the model.
The async nature of it broke the withAnimation.
I pulled out the removal of the item from items and left it sync within the withAnimation call and now the default delete animation works.
So, as long as the removal is synchronous within the withAnimation call, the animation kicks in.
I have created the following button for an interactive grid (IG) using JavaScript Initialization Code in the IG attributes section.
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
lastToolbarGroup = toolbarData.toolbarFind("actions4"),
assembleButton = {
type: "BUTTON",
hot: false,
icon: "fa fa-send u-info-text",
iconBeforeLabel: true,
action: "assemble-as"
};
lastToolbarGroup.controls.push( assembleButton );
config.toolbarData = toolbarData;
// this is how actions are added
config.initActions = function(actions) {
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { apex.event.trigger("#hiddenAssembleAsButton", "hidden_assemble_as_button_click"); }
});
}
return config;
}
Then I created the hiddenAssembleAsButton using that name as the Static ID under advanced.
The button is defined by a dynamic action Hidden_Assemble_As_Button_Click which is where I think I should be able to redirect the page, but I'm not sure.
It seems like the page redirect should happen in the jQuery Selector but I don't know what to put there or if that's the correct area to add the code.
I can add images if necessary but I feel like I've described this pretty well.
Sometimes, you need a button somewhere in the interactive grid, but you still like to use the declarative options APEX provides with basic buttons, like doing all the stuff like passing variable values, calculating checksums or opening a dialog when your target page is a model page. This can be difficult in pure javascript.
In this case, you can also just create a basic button, set it up all the way you like in the designer, then hide it using Advanced --> Custom Attributes: style="display:none". Also, set a static ID like button1.
Then, in your action, you can simply trigger a click on the button.
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { $('#button1').click(); }
});
Clicking the button does something. It triggers an event called hidden_assemble_as_button_click binded to an id #hiddenAssembleAsButton. You want it to redirect. The simplest option is to do the redirect right in that code. Replace the actions.add block with this one:
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { window.location.href = "http://www.stackoverflow.com"; }
});
I have a basic application with a UITabBarController which contains 2 UIViewControllers.
The first ViewController has a UIButton in it.
I'm trying to get the tabBar menu hidden and the button focused when the app launches.
I set the tabBar as hidden, and it does not show on launch as expected. Unfortunately, the button doesn't have the focus.
From what I understand from Apple doc, the "focus chain" engine will set focus on the first visible and focusable item in the window hierarchy.
Can anyone help me on this ?
Thank you.
Solution 1.
I think what you can do :
1.Subclass or Customize TabBarController and set
set first launch = true in viewdidload of tabController
> override weak var preferredFocusedView: UIView? { if
> (self.firstLaunch) {
> self.firstLaunch = false;
> return self.selectedViewController!.preferredFocusedView; } else {
> let view = super.preferredFocusedView
> return view; }
Hope it helps.It worked for me though
Your focus engine takes the rootView controller as TabBarController and then asks for preferred focus view which is returned as UITabBarItem we need to unfocus that subclassing the class and returning canBecomeFocus to NO.
if you want to change the focus of the element in the firtsViewController then you can overrirde func preferredFocusView and reutrn the view you want to be focussed else preferredFocusView
Solution 2. Just set the root View controller as the HomeViewController without the TabBarController and embed the TabBarController from the second page. This is because anyways you don't need to use TabBar on the first page why need to take care of its focus.
TabBar is set to hidden if you hide from the AppDelegate or the view which is loaded but it has the focus.
I am using a tab panel (Ext.tab.Panel) that has 4 tabs and on one of the child screens when the user make a selection from a radio button group, I would like the tab panel to refresh itself (i.e. load new text, new icons). How can I force the tab Panel (which is the core navigational element of the app) to refresh?
I have tried setting the show: function() { } method on the view as follows:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
...
show: function() {
this.callParent();
... reload stuff
}
});
The tabs/icons in a Ext.tab.Panel make up the items property of the component. To change these tabs/icons you must change the items.
Use setItems(items) to effectively change the tabs/icons of the Ext.tab.Panel inside your listener.
var tabpanel = Ext.getCmp('tabpanelid'); // Get appropriate panel using its id
// Removes the current tabs, and inserts the following 2 tabs
tabpanel.setItems([
{
title: 'Tab1',
iconCls: 'info',
html: 'Foo'
},
{
title: 'Tab2',
iconCls: 'reply',
html: 'Bar'
}
);
Check out a working example here.
UPDATE: To modify one of the current items, use getItems(), modify the appropriate items, and call setItems(items).
Updated Example