Is there a way to dynamically populate a combobox with the attributes a certain property of an artifact can take on?
e.g.
I have a custom field set up on User Stories. I want to be able to populate a combobox with all the possible values for this custom field without hard-coding it in.
In the code below the combobox is automatically populated with the allowed values of the custom field of dropdown type:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'kbFilter'
},
{
xtype: 'container',
itemId: 'grid',
width: 800
}
],
launch: function() {
this.down('#kbFilter').add({
xtype: 'checkbox',
cls: 'filter',
boxLabel: 'Filter table by custom field',
id: 'kbCheckbox',
scope: this,
handler: this._onSettingsChange
});
this.down('#kbFilter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
model: 'Defect',
field: 'MyKB',
listeners: {
ready: this._onKBComboBoxLoad,
select: this._onKBComboBoxSelect,
scope: this
}
});
},
_onKBComboBoxLoad: function(comboBox) {
this.kbComboBox = comboBox;
Rally.data.ModelFactory.getModel({
type: 'Defect',
success: this._onModelRetrieved,
scope: this
});
},
_getFilter: function() {
var filter = [];
if (Ext.getCmp('kbCheckbox').getValue()) {
filter.push({
property: 'MyKB',
operator: '=',
value: this.kbComboBox.getValue()
});
}
return filter;
},
_onKBComboBoxSelect: function() {
if (Ext.getCmp('kbCheckbox').getValue()) {
this._onSettingsChange();
}
},
_onSettingsChange: function() {
this.grid.filter(this._getFilter(), true, true);
},
_onModelRetrieved: function(model) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'MyKB'
],
storeConfig: {
context: this.context.getDataContext(),
filters: this._getFilter()
},
showPagingToolbar: false
});
}
});
In this example I have a dropdown field with Name: myKB and Display Name: My KB.
In the WS API the name shows with prepended c_, as in c_myKB.
However, if I use c_myKB this error comes up:
Uncaught Rally.ui.combobox.FieldValueComboBox._populateStore(): field config must be specified when creating a Rally.ui.combobox.FieldValueComboBox
Use the display name of the field, without spaces.
Here is a screenshot showing this app in action:
Related
I'm new to Sencha Touch...
I've been searching and asking people for hours, but cannot figure out why my detail view does not get the data (using setRecord).
I have not been able to find an example that uses Ext.NavigationView to push a view that uses the data from setRecord, so I suspect I'm doing something wrong there.
I have a tabbed view. First tab shows a list of items. Click an item disclosure to see details for that item. The detail view appears, but with no any data.
The tabs are setup in the launch function of ViewPortController.
The main view in the first tab is the PeopleListView. All the people appear in the list.
The PeopleListView is added to an Ext.NavigationView. A reference to the Ext.NavigationView is added to the PeopleListView so it can be used later
PeopleListViewController has a function, showDetailView, that is successfully called when a disclosure button is tapped.
The controller's showDetailView function
sets the record (which contains the correct data) on the personDetailView,
retrieves the instance of the Ext.NavigationView and pushes the PersonDetailView.
The record value passed to showDetailView has the correct data.
When personDetailView appears, the fields have no data.
ViewPortController:
launch: function() {
// var personDetailView = {
// xtype: 'persondetailview'
// }
var pplView = Ext.create('PeopleApp.view.PeopleListView');
var pplNavView = Ext.create('Ext.NavigationView', {
title: 'People',
iconCls: 'home',
useTitleForBackButtonText: true,
});
pplView.setNavigationView(pplNavView);
pplNavView.add(pplView);
. . .
var mainViewPort = getMainViewPort();
mainViewPort.setItems([pplNavView, . . .]);
},
PersonModel:
Ext.define('PeopleApp.model.PersonModel', {
extend: 'Ext.data.Model',
requires: ['Ext.data.proxy.Rest'],
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'gender', type: 'string' },
{ name: 'note', type: 'string' }
],
proxy: {
type: 'rest',
url: '/app/data/people.json',
reader: {
type: 'json',
rootProperty: 'people'
}
},
}
});
PeopleListViewController:
Ext.define('PeopleApp.controller.PeopleListViewController', {
extend: 'Ext.app.Controller',
xtype: 'peoplelistviewcontroller',
config: {
refs: {
peopleListView: 'peoplelistview',
personDetailView: 'persondetailview',
peopleView: 'peopleview',
},
control: {
peopleListView: {
discloseDetail: 'showDetailView'
}
}
},
showDetailView: function(view, record) {
console.log("record.data.name=" + record.data.name);
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
//var detailView = this.getPersonDetailView();
detailView.setRecord(record);
var navView = view.getNavigationView();
navView.push(detailView);
},
launch: function() { this.callParent(arguments); },
init: function() { this.callParent(arguments); },
});
PersonDetailView:
Ext.define('PeopleApp.view.PersonDetailView', {
extend: 'PeopleApp.view.BaseView',
xtype: 'persondetailview',
requires: [
'Ext.form.FieldSet',
'Ext.form.Text',
'Ext.form.TextArea'
],
config: {
title: "Person Details",
scrollable: true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]}
]}
});
Can you tell me why detailView.setRecord(record) does not get the data set in the fields of DetailViewController, and what I need to do differently?
I am not sure but you should use below code in your Person detail view:
items: [
{
xtype:'formpanel',
id:'personDetailViewForm',
items:[{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]
}]
}]
and in the personListViewController you can set that form's values instead of setting records to the view like:
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
var personDetailViewForm = detailView.down('#personDetailViewForm ');
personDetailViewForm .setValues(records);
Note that records object property names and form fields names must match and if records doesn't work try with records.data.
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
I have a layout in which I want to show list items on left-pane. How can I show list items there along with some click event?
{
docked: 'left',
style: 'background:#7b7b7b',
html: 'Here I want to show Ext.List'
}
My List items are Home, About, User, Help.
Your List..instead of "html: 'Here I want to show Ext.List'"
withe the listeners you can creat some tap events
items: [
{ xtype: 'list',
store: 'NaviStore',
id: 'NaviList',
itemTpl: '<div class="contact">{text}',
scrollable: false,
listeners:{
itemtap: function (obj, idx, target){
alert(List is Clicked);
}
}
}]
Your store
Ext.define('MyApp.store.NaviStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.NaviModel',
config: {
model: 'MyApp.model.NaviModel',
data: [
{ text: 'Item1'},
{ text: 'Item2'},
{ text: 'Item3'},
{ text: 'Item4'}
],
autoLoad: true
}
});
Your model
Ext.define('MyApp.model.NaviModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
The controller function
startpage:function(a){
var model1 = this.store.getAt(a.index);
App.views.start.load(model1);
App.views.viewport.reveal('start');
},
how to get the loaded model1 values in the start page
how can i able to pass parameter from controller to a page
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){}
}
As your extending the FormPanel, I believe Sencha will pre-populate your fields.
Your code will looking something similar to this:
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){
var fields = {
xtype: 'fieldset',
id: 'a-form',
title: 'A Form',
instructions: 'Some instructions',
defaults: {
xtype: 'textfield',
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
name : 'title',
label: 'title',
xtype: 'textfield'
},
{
name: 'email',
label: 'email',
xtype: 'emailfield'
}
]
};
Ext.apply(this, {
scroll: 'vertical',
items: [ fields ]
});
App.views.start.superclass.initComponent.call(this);
}
}
Ext.reg('App.views.start', App.views.start);
Note that you will have to substitute in your actual fields and you'll probably need to customise the form somewhat.
I'm submitting a form, but magically my form values don't get posted.
The onBeforeSubmit fires with the expected values and I can even do this.getValues() just before this.submit()
MyForm= function(config){
if ( typeof config !== 'object' ) {
config.url='test.php';
// config.standardSubmit = true;
config.items= [{
xtype: 'fieldset',
title: 'Login Details',
instructions: 'Please enter the information above.',
defaults: {
required: true,'
},
items: [{
xtype: 'textfield',
name : 'username'
}, {
xtype: 'passwordfield',
name : 'password'
}]
}];
var tbarBottom = {
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Login',
ui: 'confirm',
handler: function() {
this.onLoginClick();
},
scope: this
}]
};
config.listeners= {
beforesubmit: function(formpanel, values, options) {
console.log(values);//yup they are there
},
scope:this
}
config.dockedItems= [tbarBottom];
MyForm.superclass.constructor.call(this,config);
};
Ext.extend( MyForm, Ext.form.FormPanel,{
onResetClick: function() {
this.reset()
},
onLoginClick: function() {
console.log(this.getValues());//yup they are there
this.submit()
}
});
TL;DR This submits to the server, but I have no values being posted, do you have any idea why?
As per http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Request-cfg-method the default for method is GET, it should be changed to POST in the config obj. (Eg config.method='POST') and off you go