by default how to select first item in list, without tapping it? below is the my view.
Ext.define('MyApp.view.TestList', {
extend: 'Ext.List',
xtype: 'testlist',
config: {
flex: 1,
enableSelection: true,
itemTpl: '{item}',
data: [
{item: 'item-1'},
{item: 'item-2'},
{item: 'item-3'},
{item: 'item-4'}
]
}
});
Ext.List has two methods that will help you:
list.select( record, keepExisting, surpessEvent );
list.selectRange( startRecordIndex, endRecordIndex, keepExisting );
In your case you can you use list.selectRange( 1, 1, false ); to select the second data record.
Related
I'm trying to create a view, which has essentially a list where each row has text and 2 buttons aligned right. The text of the buttons will always be the same - only the text of the row will need to be fetched from the store.
I saw this question but couldn't get the proposed solution to work. I definitely have records in my store, but the dataview does not display.
A simplified version of my code:
My main view:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
...
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [
...
{xtype: 'mylist'}
...
]
...
}
...
});
DataView:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.DataView',
alias: 'widget.mylist',
requires: ...,
config: {
useComponents: true,
store: 'my-store',
defaultType: 'listitem'
}
});
DataItem:
Ext.define('MyApp.view.ListItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.listitem',
config: {
layout: ...
items: [{
xtype: 'component',
itemId: 'description',
html: '',
flex: 2
},
{
xtype: 'button',
text: 'a button',
itemId: ...,
flex: ...
},
{
... another button
}]
},
updateRecord: function(record) {
...
this.down('#description').setHtml(record.get('description'));
// record.get('description') does give me an undefined value
}
});
Assuming my stores and models are set up properly, what could the problem be?
Alternatively, maybe I should just use a standard list, but set the width to <100%, and just add 2 buttons to the right for each row. Though I'd rather get the current approach to work...
Edit:
Ended up using the dataMap approach.
My DataItem now looks like:
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
flex: 1
}
},
applyDescription: function(config) {
return Ext.factory(config, Ext.Component, this.getDescription());
},
updateDescription...
Basically like this.
I see the labels now, but am stuck on how to get a button in there. Since I don't want to link it to a store, I don't want to put it in the dataMap. I tried putting it in items, but to no avail.
Edit 2:
Well, getting the button to display was easier than I thought. It's just a repeat of what I did with the label, but without including it in the dataMap - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...
The last issue I need to resolve is, how to uniquely identify them. I want a listener on the button, but somehow pass in the record into the handler.
My solution for getting a button in a dataview without linking it to the store. It's actually, somewhat unsurprisingly, similar to this blog post.
view - ListItem.js
...
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
cls: ...,
flex: 4
},
myButton: {
cls: ...,
text: 'Button!',
flex: 1
}
},
applyDescription, updateDescription (same as in the question),
applyMyButton: function(config) {
return Ext.factory(config, Ext.Button, this.getMyButton());
},
updateMyButton: function(newButton, oldButton) {
... same logic as the other update method
}
In my dataview:
...
config: {
itemId: ...,
store: ...,
useComponents: true,
defaultType: 'listitem',
width: '100%',
flex: 1,
listeners: {
itemtap: function(dataview, index, element, evt) {
var store = dataview.getStore();
var record = store.getAt(index);
...
}
}
}
...
I have sencha touch 2 list , i want to add toolbar to the left of each list item . Is it possible if so how? I referred this link : http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2, But in my case i have to add toolbar .
It must be like :
toolbar-list item text-closure icon
toolbar-list item text-closure icon
toolbar-list item text-closure icon
toolbar-list item text-closure icon
You can look DataItem documentation. Here the code of example:
Ext.define('MyDataItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.mydataitem',
config: {
padding: 10,
layout: {
type: 'hbox'
},
defaults: {
margin: 5
},
items: [{
xtype: 'button',
text: 'Val1'
}, {
xtype: 'component',
flex: 1,
html: 'val2',
itemId: 'textCmp'
}]
},
updateRecord: function(record) {
var me = this;
me.down('button').setText(record.get('val1'));
me.down('#textCmp').setHtml(record.get('val2'));
me.callParent(arguments);
}
});
DataItem extends from container. So you can add any component on it. Included Toolbar. Add your toobar in the items array with option docked: 'left'.
I have a navigation view with list(A) as its item.
On clicking the list(A) item, showing new view(B).
Now the new view(B) is having one button on clicking again change to view(C).
Problem is
view(C) is same as view(B).
I am able to create the new view and push it, but not able to populate with new data.
and on coming back to view(B), I am getting the data of view(C).
How to solve this scenario.
Code:
/**
* navigationview with list(A)
*/
Ext.define('activity', {
extend: 'Ext.navigation.View',
config: {
items:[
{
grouped:true,
pinHeaders: true,
xtype:'list',
store:{
xclass:'ActivityList'
},
itemTpl:'{title}',
emptyText: 'nothing found'
}
]
}
});
/**
* child view(B) to be appeared on clicking any item in list(A).
*/
Ext.define('TaskDetails', {
extend: 'Ext.Panel',
config: {
title: 'Task',
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: '40px',
items: [
{ xtype: 'spacer'},
{
xtype: 'segmentedbutton',
height: '30px',
items: [
{
text: 'Task Details',
pressed: true
},
{
text: 'Child Tasks',
badgeText: '0'
}
]
},
{ xtype: 'spacer'}
]
},
{
xtype: 'container',
items: [
{
xtype:'dataview',
store: {
xclass: 'TaskDetails'
},
itemTpl: 'some thing....'
},
{
xtype:'list',
store:{
xclass:'ChildTask'
},
itemTpl: 'some template...'
}
]
}
]
}
});
I am changing view in controller and want to show the same view(B)again with new data on clicking the list in view(B).
This is a feature of navigation view which you cannot circumvent. Use setActiveItem instead to push views... I had the same issue and changed to setActiveItem it gives you more control of your views than navigation view so
After you first load the view(2), the ref returns an array of 1, as it should. Refs only work if 1 component is returned.
After you load the view(2) again the ref returns an array of 2.
This means none of the listeners fire and the data doesn't load on new instances.
Refs bind to dom elements when controllers first see a view. We can't change that. This means we can't use a ref directly. We know the Ext.ComponentQuery.query is what refs rely on. Using that, we can simulate refs at runtime. I put a runtime dataview ref in the initialize() function of the controller to load the data for a new view. This seems to run every time a view is created, so it works.
I have implemented a list view for different colors in Sencha Touch.
And implemented a item tap method to push the view in container.
And Implemented 4 views for each 4 color RedPage.js, WhitePage.js, yelloPage.js, GreenPage.js.
View:
{
xtype: 'list',
id : 'ColorsList'
width: '20%',
itemTpl: [
'<div><b>{Color}<b></div>'
],
data: [
{Color: 'Red' },
{Color: 'Blue'},
{Color: 'Yellow},
{Color: 'Green}
]
},
Container:
ColorsList: '#ColorsList',
init function(){
..
..
..
..
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
...
...
...
},
ColorsPagesSelected Method:
ColorsPagesSelected: function() {
alert('Color page pushed');
this.getColorrightnavigation().push(Ext.create('ArtGalleryApp.view.RedPage'));
},
Since i used Colorslist id and used to push RedPage for list, it displays RedPage for each item in the list.
I dont know how to get different pages for differnt rows
Can any one help me pls thanks in advance
assuming you defined your colored pages like this:
Ext.define('App.view.RedPage', {
extend: 'Ext.Panel',
xtype: 'RedPage',
...
});
use helpful Ext.widget function
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
var color = record.get('Color'),
pageName = color + 'Page',
page = Ext.widget(pageName);
this.getColorrightnavigation().push(page);
}
My favorite hack for this is to assign functions to records
{
xtype: 'list',
id: 'ColorsList'
width: '20%',
itemTpl: ['<div><b>{Color}<b></div>'],
data: [{
Color: 'Red',
getPage: function() {
return Ext.create('ArtGalleryApp.view.RedPage');
}
}, {
Color: 'Blue'
}, {
Color: 'Yellow},
{Color: '
Green
}]
},
init function(){
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
this.getColorrightnavigation().push(record.getPage());
}
So I've a problem 'cause i want to show parent data on grid, illustrated here:
PARENT MODEL
Ext.define('Ab.model.Marca', {
extend: 'Ext.data.Model',
fields: ['id','nombre'],
hasMany: {model: 'Ab.model.Maquina', name: 'maquina'},
proxy{...}
});
CHILD MODEL
Ext.define('Ab.model.Maquina', {
extend: 'Ext.data.Model',
fields: ['id','nombre', 'codigo', 'estado'],
associations: [
{type:'belongsTo', model:'Ab.model.Marca', name: 'marca'},
]
proxy:{...}
});
CHILD GRID
Okay, MaquinaController execute load from Store and that is not important 'cause load informations very nice. The problem is that I can't show parent data.
Ext.define('Ab.view.maquina.MaquinaList', {
extend: 'Ext.grid.Panel',
alias: 'widget.maquinalist',
store: 'Maquinas',
columns: [
{ text: _('Nombre'), flex: 1, dataIndex: 'nombre' },
{ text: _('Código Externo'), flex: 1, dataIndex: 'codigo' },
{ text: _('Estado'), flex: 1, dataIndex: 'estado' },
{ text: _('Marca'), flex: 1, dataIndex: 'marca' } <<< HOW CAN I SHOW MARCA?
]
});
Thanks in advance.
Override column.renderer , and return record.getParent().get('someData');
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
renderer: function(value, metadata, record, rowIndex, colIndex, store, view){
return record.getMarca().get('nombre');
}
Also, make sure you are following the rules:
http://extjs-tutorials.blogspot.ca/2012/05/extjs-belongsto-association-rules.html