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);
}
Related
I am managing a list of items that open different modals, like so:
list() {
return [
{
click: () => this.modal.show(),
icon: 'fas fa-file-import',
text: 'Hello World'
}
]
}
But for one of the list items, I made a modal that needs to show data related to the user that is opening it. When it comes to data, I only know how to do it using router-links, like so:
list2() {
return [
{
label: data => data.item.orderName,
to: data => `/orders/${data.item.id}`
icon: 'fas fa-file-import',
}
]
}
But how can I do the same with a modal?
I tried linking to the modal component:
to: data => `/modal/${data.item.id}
but that has no effect. I just get routed to a blank page.
In app.component.ts, I added all pages of the menu item, when Home page is open I want to hide Home menu item from side menu bar and same for all pages. I was trying to use class name by for hide but it affects to all menu items css. Please give me the solution:
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
this.pages = [
{ title: 'Home', component: HomePage, icon:'home' },
{ title: 'Order History', component: OrderHistory, icon:'timer' },
{ title: 'Profile', component: Profile, icon:'person' }
];
}
openPage(page) {
console.log("open Menu");
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
Hi StackOverFlow Community,
Well, maybe is theory that I forget read, but I don't stand why this code below don't show me anything. (I already try with another answers in the forum like config height manual and layout fit work but with these layout I can't do what I want).
Code:
Ext.define('myMoney.view.Settings',{
extend: 'Ext.Panel', //--> Ext.Container don't work either
fullscreen: true,
xtype: 'configuracion',
config: {
title: 'Configuracion',
iconCls: 'settings',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
width: '50%',
height: '50%',
flex:1,
},
items: [
{
xtype: 'list',
itemTpl: '{item}',
data: [
{item: 'Cuentas Actuales'},
{item: 'Agregar nueva Cuenta'},
]
},
]
}
});
The real code have two 'fieldset' before the list but I don't want show you guys a code too long. so, anyone knows what happens?
Usually it is fixed by layout: 'fit' setting. You could add it to the outer fieldset config.
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();