I have a list with suppose 5 items and I want to disable selection and showing blue color on item tab for 1 item only and enable for others.
Is it possible to do that and how?
Yes, you can do that programmatically by adding a itemtap listener when you tap an item on the list. For example, you have five items and you want to disable the second item to be highlighted when selected. Index of the list comes into play here.
Here is the code:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
id: 'MyList',
store: 'MyArrayStore',
itemTpl: [
'<div>{Value}</div>'
],
listeners: [
{
fn: 'onMyListItemTap',
event: 'itemtap'
}
]
},
onMyListItemTap: function(dataview, index, target, record, e, eOpts) {
if(index===1) // 1 is the 2nd item in the list
{
Ext.getCmp('MyList').getAt(index).setDisabled(true); //getting the list using id 'MyList', getting the item using index and then setting it as disabled.
}
}
});
Related
I am trying to dynamically add list(with its items) to my container.
Instead of simple HTML template, I need list items to contain panel with a title bar, image & few more things.
To do this I am loading store data and within its callback creating List & array of items. Then I add items to the list and list to the container but end result is just last panel visible instead of sliding list of all panels.
Here is my code:
var vLists = [];
this.load({
callback: function(records, operation, success) {
var hccontainer = Ext.getCmp('hccontainer');
this.each(function(record){
var sid = 'styleStore'+record.get('id');
var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
vLists.push({
xtype: 'panel',
scrollable: 'false',
layout: 'fit',
cid : record.get('id'),
ctype : record.get('type'),
cname : record.get('name'),
stid : sid,
tp : styleTemplate,
items: [
{
xtype : 'titlebar',
title : record.get('name'),
docked : 'top',
cls : 'x-toolbar-transparent-top'
},
{
xtype : 'image',
src : record.get('image'),
}
]
});
});
//hccontainer.remove(Ext.getCmp('hc'), true);
Ext.getCmp('hc').destroy();
var hc1 = Ext.create('Ext.dataview.List', {
layout : 'fit',
config: {
direction: 'horizontal',
id : 'hc'
}
});
hc1.setItems(vLists);
Ext.getCmp('hccontainer').add(hc1);
},
scope: this
});
Is this right way to add items or I am missing something.
PS Instead of List if I use Carousel, this works fine
Carousel is more of a layout component than List is. It doesn't look like you need to use a list, I don't see any handler for item taps for example. If you want to avoid using templates than you should not use a List. Instead just make a component with a list-like layout. I would use a container with a vbox layout, scretched horizontally and with a static height. You can then put whatever item configuration you want into this.
In ExtJS 4, I have a grid that contains an action column. Whenever that action is triggered, I want to execute "my action".
Without MVC, this would look like this:
/* ... */
{
xtype: 'gridpanel',
columns: [
/* ... */
{
xtype: 'actioncolumn',
items: [{
handler: function(grid, rowIndex, colIndex) {
// my action
}
}]
}
]
}
Now I want to introduce the View-Controller separation. So I have to move the handler from the View to the Controller.
But how does the controller register its method to the action column? Looking at the ExtJS 4.1 actioncolumn docs, I can't find any event I could listen to. I also can't find a method to set the action column's handler afterwards.
So how can I achieve a clean View-Controller separation when using an actioncolumn?
Are actioncolumns not yet ready for MVC?
The problem is not in actioncolumn but in its items which are not ExtJs Widgets. This items are simple images. That's why we cannot assign handlers in control in such a way:
this.control({
'mygrid actioncolumn button[type=edit]' : this.onEdit
This way, however, would be the best one.
Unfortunately this way is impossible. But There is another way, which is almost as clean as the preferred one: make actioncolumn handler to fire grid's custom event (created by you):
// view
{
xtype: 'actioncolumn',
items: [{
icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/icons/fam/cog_edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemeditbuttonclick"
this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
}},
// controller
init: function() {
this.control({
'viewport > testpanel': {
itemeditbuttonclick: this.onEdit,
itemdeletebuttonclick: this.onDelete
}
});
},
Example
Here is demo.
This post explains an even simpler method than the accepted answer, if you only happen to have one type of actioncolumn item in your grid:
http://mitchellsimoens.com/actioncolumn-and-mvc/
Basically: just listen for the actioncolumn's click event in your controller. However, this doesn't work if you need to distinguish between multiple actioncolumn types.
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
How can I create a grouped Nested List in ST2 like I would in Xcode with Storyboards? I only need groups at the root level. Here's some idea of what it looks like in a native app.
I didn't see anything in Sencha's NestedList documentation.
In ST2, the NestedList method getSubList() is now getList(), and it works a bit differently. Overriding it to propagate the grouping info worked for me:
/**
* Override Ext.dataview.NestedList.getList to propagate grouping info from
* parent NestedList to List sublist.
*/
getList: function(node) {
var list = this.callParent(arguments);
list.grouped = this.grouped;
list.store.setGrouper(this.getStore().config.grouper);
return list;
}
Already asked here on Sencha Touch forum.
http://www.sencha.com/forum/showthread.php?122238-Grouped-Nested-List.
You can look at the KitchenSink example (User Interface -> List -> Grouped)
http://docs.sencha.com/touch/2-0/#!/example/kitchen-sink
It's a simple list, just with a storers/grouper attribute in the store :
Ext.create('Ext.data.Store', {
id: 'ListStore',
model: 'Contact',
sorters: 'firstName',
grouper: function(record) {
return record.get('firstName')[0];
},
data: [...
And you call it in your list item settings :
items: [{
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'ListStore',
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
grouped: true,
indexBar: true
}]
Hope it'll help :)
Create a simple grouped list and set a "tap" event for the group headers. On tapping the header, open another panel and show the list with items from only that group.
i have a panel which should show the "description" field of "currently activeitem of nestedlist". nestedlist uses the model having fields:
id
text
description
when user taps on any item of nestedList [on selectionchange OR itemtap&backtap], i want to change description in the panel with description of "currently activeItem of nestedList".
Is this possible?
thanks for any help/solution/pointer.
The same problem I had today, and no solution had been found with a nested list, because no single field can be taken from a Ext.data.TreeStore. One solution could be that you have lots of "if-function 'do with all the ID's and then you give each ID a text. But that's not good.
I've decided to make a simple list.
if you want I can show you my solution for the simple list
ps.: I use Sencha Touch 1.1
Update:
NotesApp.views.NaviList = new Ext.List({
fullscreen: true,
flex: 1,
layout: 'card',
scroll: false,
useToolbar: false,
itemTpl: '{text}',
store: store,
listeners: {
itemtap: function (obj, idx, el, e) {
var record = this.store.getAt(idx);
var tle = record.get('text');
index = record.get('index');
NotesApp.views.notesListContainer.setActiveItem(index, { type: 'slide', direction: 'left' });
}
}
}
});
description:
My App has the name: "NotesApp".
"notesListContainer" is a Container where all my List are displayed. "index" is an ID that I get from the store and the calls list.
Now when you tap on my NaviList you set a new ActiveItem in this Container.
thanks a lot for the reply. I also tried using simple list with one Ext.button(back button in case of nestedlist). On itemtap and buttonclink, i change list's content by
var t = new Ext.data.Store and list.setStore(t).
Please let me know if there is any other better option to do it.