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
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 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 panel (layout:'vbox') with two items; a panel and a list.
Code
this.currentFolderPnl = new Ext.Panel({
cls:'document-current-folder-panel',
html:'/'
});
this.list = new Ext.List({
scroll: 'vertical',
cls:'document-list',
id: 'document-list',
store: app.stores.Document,
itemTpl: app.templates.document
});
app.views.DocumentList.superclass.constructor.call(this, {
selectedCls : "x-item-selected",
dockedItems: [{
xtype: 'toolbar',
ui:'dark',
title: 'Documents',
items:[this.backBtn,{xtype:'spacer'},this.newBtn]
}],
layout: {type:'vbox',align:'stretch'},
items: [
this.currentFolderPnl,
this.list
]
});
I have tried many things but nothing worked. Could somebody tell me what to do.
Thanks
A scroll can only appear while the child element is larger in size (either height or width or both) than the parent element. Because you are using a vbox layout, it expects height for each component. So, a list scroll will come while it fits inside a panel.
Now for your case, two options can be there:
Option 1:
You can provide a height to the first panel (which still you didn't provide) and add another panel after that with following details:
{
flex : 1,
layout : 'fit',
items : [this.list]
}
This will fit the list within second panel and the scroll will come automatically.
Option 2:
Here you use a default layout (AutoContainerLayout) i.e. not providing any layout. And your above combination will work (better give a height to the first panel). Remove scrolling from list and add scroll vertical to main panel. This way:
this.currentFolderPnl = new Ext.Panel({
...
height : 50
});
this.list = new Ext.List({
scroll: FALSE,
....
});
app.views.DocumentList.superclass.constructor.call(this, {
scroll : 'vertical',
...
});
I didn't test the above option but this should work fine.
I'm new to Sencha Touch and the Ext JS logic. Actually, I'm displaying a list of items containing two fields (title, type) grouped by default alphabetically by first character of the title and I added a button to a toolbar that I want it to switch the grouping to be by type. I tried to programmatically set the getGroupString function in the buton handler in this way :
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [{
text: 'By type',
handler: function() {
MyApp.MyStore.getGroupString = function(record) {
return record.get('type');
};
MyApp.itemsList.update();
}
}]
});
But that seems just to not work. Any help ?
Thanks
Just wanted to close the question as I have already answered it
MyApp.itemsList.refresh();
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