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();
Related
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 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
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 am new to sencha , and I am using sencha 2 mvc.I am having a Tabpanel and the first tab contains a list.When clicking on the button in the list i want to load/switch view of its details with a form..I am unable to find the answer.Please help me asap..
{
xtype: 'tabpanel',
baseCls:'tabheader',
cls:'tab_container',
scrollable:true,
tabBarPosition: 'top',
flex:1,
items: [
{
xtype:'container',
title:'Sample',
id:'Sample',
layout:'card',
cardSwitchAnimation: 'slide',
tabBarPosition: 'top',
items:[
{
title: 'Sample',
xtype: 'list',
flex:1,
store: 'SampleWithoutAgentOffers',
itemTpl: '{name}' ,
onItemDisclosure: function(record, btn, index) {
Ext.Viewport.setActiveItem(1);
}
}
]
},
{
xtype:'panel',
html:'hiiii'
}
]
}
On itemdisclosure i want to load view..Please help me..
Please see my edits to your original question, I'm not sure if that configuration you posted would even run in JavaScript.
I fixed your configuration object so it should technically work. However, I don't have visibility into your Viewport object. If what you are trying to do onItemDisclosure is show the panel with html of 'hiii', then you should be doing:
onItemDisclosure: function(record, btn, index) {
this.parent.setActiveItem(1);
}
How can I set the row height in a Sencha Touch List object?
I'm using HTML to format the row, rows get taller with multiple lines, but how do I set the row height?
Thanks,
Gerry
To edit the List elements default height, you have two ways to do it:
Create your own Sencha Theme with SASS (The official Sencha way to do it).
Override the Sencha Touch Theme CSS.
In the first case you only need to edit the $global-row-height variable value like, for example.
$global-row-height: 100px;
If you want to override the CSS class directly with an additional CSS file, you can do it adding a new rule just like this:
.x-list .x-list-item {
min-height: 100px;
}
If you want to set the list Height of a single list you have to set your css class in this way:
.myList .x-list-item {
min-height: 100px;
}
and add the cls config param to your list definition like this
var list = new Ext.List({
cls: 'myList',
...
...
});
You can also use the list config property itemHeight,like this:
var list = new Ext.List({
itemHeight: 25, //to set row height to 25 pixels
...
...
});
However, I always suggest to learn SASS. It's really easy and it really worth learning.
Hope this helps.
Since Sencha Touch 2.1 you can use list config property itemHeight (more info here). Just for information, it's also possible in NestedList object by using listConfig property.
Use the below code to change the height of list item in Sencha Touch.
{
xtype: 'list',
id: 'myList',
//Below two properties to change the default height
//default = 47 chaged to 30 below
variableHeights: true,
itemHeight: 30 ,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
Incase somebody is still looking for the answer in Sencha Touch 2.4.1, here it comes:
listeners: [
{
event: 'painted',
order: 'before',
fn : function() {
// Set the height based on the number of items in the list!
var itemCount = this.itemsCount,
itemHeight = this.getViewItems()[0].element.getHeight(), // Works!
heightOfList = itemCount * itemHeight;
this.setHeight(heightOfList);
}
}
]
I am adding a listener for the painted method inside of my listView. I'm not sure if it matters, if you add the listener at the position of before, or after, but before made more sense to me.
I am simply taking the count of items in the list and multiplying it with the actual height of a list item element. I assume that all list items have the same height in the final list (this will always be the case for my list).
I tried the same approach with
itemHeight = this.getInnerItems()[0].element.getHeight() // Does NOT work
but that wouldn't work, because the elements would have a height of 0px at this points.
The code above works!