I want to create a controller with a ref to a specific item in a List, is this possible?
So really I need the ComponentQuery to reference a listitem. I am setting the data inline in the list:
Ext.define('MyApp.view.MyView', {
extend : 'Ext.List',
alias : 'widget.mylist',
config : {
title : 'Title',
itemTpl : ['{displayName}'].join(''),
data : [{
displayName : 'One',
id : 1
}, {
displayName : 'Two',
id : 2
}, {
displayName : 'Three',
id : 3
}, {
displayName : 'Four',
id : 4
}]
}
});
Then on in my controller (this is obviously not working):
refs : {
oneListItem: 'mylist.list[id=1]',
twoListItem: 'mylist.list[id=2]',
threeListItem: 'mylist.list[id=3]',
fourListItem: 'mylist.list[id=4]'
}
Hopefully this is possible. If it is not I can listen for an 'itemtap' on the list and call a method from there, however, I would prefer not have to do that for cleanliness.
Thanks in advance.
Brad
First off: adding id to the objects in your data section will not have any effect, that is just the data that's taken and substituted in the itemTpl you specified before.
As to your question: Sencha Touch 2 Documentation does not mention a way to have Ext.ComponentQuery select the n-th child of a Component, so, assuming you want to create your list objects with inline data, the only way I see is to use the id that Sencha automatically applies to each listItem on creation.
These ids are of the #ext-listitem-1 kind, see an example of how to use them in this Sencha Fiddle demo.
This is however bad practice, because you cannot rely on those id, if for example you add another list to your application they can change breaking your code.
I do not see any valid reason why you shouldn't use itemtap to act on the list, since with the event you get all the data you need to manipulate the proper list item:
itemtap( this, index, target, record, e, eOpts )
For completeness sake, I must mention that you could also add your items dynamically with Ext.dataview.List.add(), that way you should be able to create your dataitems with a custom id.
You might try Ext.select('.x-list-item-first'); or Ext.select('.x-list-item-last'); if you want a handle on the first or last item. I would encourage you to add an xtype set to "mylist" instead of using alias.
Related
I would like to have my Feature Table display sorted on the first column when it first appears instead of requiring the user to sort it by clicking on the column header. I have not been able to find a method to do this.
Not sure if this is the best solution, it would be nice to be able to set this in the constructor, but if you call myFeatureTable.grid.set('sort', [{ attribute: ''}]); after the grid fires it's load event, this will sort it before it appears in the UI. For example:
on(myFeatureTable, "load", function(){
myFeatureTable.grid.set('sort', [{ attribute: "<attribute used in first column>"}]);
});
Another method if you have not required dojo/on, you can use the on method of the feature table.
myFeatureTable.on('load', function () {
// Sort on the Name attribute
myFeatureTable.grid.set('sort', [{ attribute: "Name" }]);
})
I am creating a rallygrid component and would like to have the grid items grouped by their parent's Name attribute (bonus if I could also display the ID of the parent). I added the groupBy:'Parent' configuration to the storeConfig of the grid and was surprised that no results were returned. I also tried using groupBy:'Parent.Name' but still nothing.
I know this is possible with other fields such as Owner, but I'm at a loss as to why the Parent wouldn't be usable as well. Is this a bug, or am I setting the config up incorrectly?
Thanks
Change the storeConfig to keep the records from trying to update after being grouped:
storeConfig : {
remoteSort : false,
remoteGroup : false,
remoteFilter : false,
}
Add a listener to the load event which assigns a root level property to the record and groups by that record value. (For some reason store.group('Parent.Name'); doesn't work.)
load: function(store) {
store.each(function(record) {
record.set('ParentName', record.get('Parent') && record.get('Parent').Name || '-- Unparented --');
});
store.group('ParentName');
}
I thought it was a bug with the SDK too, but per WS API documentation, Parent, unlike Owner, or Feature is not sortable.
So when I use groupField: 'Parent' the grid is empty, and response showed error:
Ext.data.JsonP.callback6({"QueryResult": {..., "Errors": ["Cannot sort using attribute Parent"]
It is trying to sort by Parent, but Parent attribute is not sortable. So the SDK ran into a WS API limitation.
On a side note, I did not use groupBy, instead I used groupField on the store (in this example I grouped by Kanban field) :
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'UserStory',
groupField: 'c_MyKB',
//...
});
And then used features: [{ftype:'grouping'}] in the grid.
this._myGrid = Ext.create('Ext.grid.Panel', {
store: myStore,
features: [{ftype:'grouping'}],
//...
I am trying to access values from form but I am getting all null values.
My code structure is :
Inside view id is provided say, syzForm
In controller
syzForm:'#syzForm',
and trying to access values from form using getter method as getSyzForm();
But All values I am getting are null.
Please let me know where I am wrong.
Thanks In advance.
In the config section in your controller make a reference to the form you want to work with.
Ext.define('App.controller.Controller', {
extend : 'Ext.app.Controller',
config : {
refs: {
YourFormRef: {
selector : 'yourform',
xtype : 'yourform',
autoCreate : true
}
}}}
And make sure that FormView's id is the same as the selector. Now you should be able use the getters and setters to manipulate your Form.
Currently the additional field is calculted in the grid columnCfgs using an xtype of templatecolumn. I need to add this field to the grid data store so that it can be used to filter the grid data.
Model classes fields property is processed in a special fashion. Instead of replacing the parent class' ones as a normal property would, child fields are appended to them.
See this example:
Ext.define('Base', {
extend: 'Ext.data.Model'
,fields: ['foo','bar']
});
Ext.define('Extended', {
extend: 'Base'
,fields: ['baz']
});
var record = Ext.create('Extended');
record.fields.each(function(field) {
console.log(field.name);
});
That gives the following output:
foo
bar
id
baz
Im trying to get the column header for the cell im clicking, but im not finding the correct way to do it
Right now, im using this code to identify the column:
if (position.column == 5 /*this is column name*/)
Obviously this is a bad choice, since any change on the grid will have consequences on the code.
Once again, thanks for the help
Assuming you are using a Ext.Grid.Panel. There is a columns array that can be indexed into to give you the column definition. the "text" property will contain the displayed column name.
alert(gridPanel.columns[0].text); //Alerts the 1st columns' header text.
If this doesn't answer your question a little more context would be helpful. In which event are you capturing your position?
If you are trying to determine a better way to get your column position setting the grid's initial config selType property to 'cellmodel' will give you a Ext.selection.CellModel selection model whose select event would give you the current cell position (col, row).
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Collumn 1'
}, {
header: 'Column 2'
}
],
selModel: {
selType: 'cellmodel'
}
});
grid.getSelectionModel().addListener('select', function(selModel, record, row, column, eOpts){
alert(grid.columns[column].text);
});
The best method might depend on where the code is, but here is some code from the CellEditing plugin which might be a good place to start:
editColumnHeader = grid.headerCt.getHeaderAtIndex(position.column);
From there, text looks like it would work, you might also be able to use itemId if you set that in the column.