What might I be missing in this example where I enhanced this simple app with a "Blocked" and "BlockedReason"? No BlockedReason manifests on the grid even though I have such data.
_queryForStories: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
autoLoad: true,
fetch: ['Rank', 'FormattedID', 'Name', 'Blocked', 'BlockedReason'],
filters: [this.down('#iterationComboBox').getQueryFromSelected()],
sorters: [
{
property: 'Rank',
direction: 'ASC'
}
],
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [], rankIndex = 1;
Ext.Array.each(data, function(record) {
records.push({
Ranking: rankIndex++,
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
Blocked: record.get('Blocked'),
BlockedReason: record.get('BlockedReason')
});
});
...
if(!this.grid) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
store: customStore,
columnCfgs: [
{ text: 'Ranking', dataIndex: 'Ranking' },
{ text: 'ID', dataIndex: 'FormattedID' },
{ text: 'Blocked', dataIndex: 'Blocked' },
{ text: 'BlockedReason', dataIndex: 'BlockedReason', flex: 1 },
{ text: 'Name', dataIndex: 'Name', flex: 1 }
]
});
}
This is likely due to the addition of a built-in BlockedReason field in our data model recently. Anyone who had an existing BlockedReason field defined had it renamed to BlockedReasonDeprecated. Additionally, the BlockedReason field is only available in web service versions 1.38 and above.
So you can either use BlockedReasonDeprecated as your field or if you're using SDK 2.0p4 or above you can include wsapiVersion: 1.38 in your WsapiDataStore config to use the new built-in field.
Related
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:
I'm trying to display different data (from different store and model) deponding on button click but failing at some point ( to be frank, I'm not sure how to use the reconfigure function). Below is my code:
Components and button click function:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 328,
width: 478,
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Button1'
},
{
xtype: 'button',
text: 'Button2',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Button3'
},
{
xtype: 'gridpanel',
id: 'myGrid',
title: 'My Grid Panel',
store: 'Button1Store',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Email',
text: 'Email'
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, eOpts) {
//alert("button 2");
var gridVar = Ext.getCmp('myGrid');
var newStore = Ext.getCmp('MyStore2');
//alert( gridVar.columns[0].dataIndex);
//gridVar.bindStore(newStore);
gridVar.reconfigure(newStore, gridVar.columns);
}
});
Store1 and Model 1:
Ext.define('MyApp.store.Button1Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button1Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.Button1Model',
storeId: 'MyStore1',
data: [
{
Name: '1',
Email: 'test1'
},
{
Name: '2',
Email: 'test2'
},
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button1Model', {
extend: 'Ext.data.Model',
idProperty: 'Button1Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
Store 2 and Model 2:
Ext.define('MyApp.store.Button2Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button2Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.Button2Model',
storeId: 'MyStore2',
data: [
{
Name: '3',
Email: 'test3'
},
{
Name: '4',
Email: 'test4'
}
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button2Model', {
extend: 'Ext.data.Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
When I try this, the title and data in the grid dissappears. I tried the gridVar.bindStore(newStore); but it throwed an error stating that data is null or undefined. Pls help...
If you are using same grid for all actions then change the store's proxy URL for various actions and populate the data to grid by using load() method !!
I am trying to fetch data from store.and i want to use it on my table layout in an extjs panel but always get an empty string though the data is printed in the console. Any pointers would be much appreciated.
<code>
Ext.onReady(function(){
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'nooflicenses'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Account',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: "accounts"
},
reader: {
type: 'json',
root: 'Account',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'results',
idProperty: 'id'
},
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not ");
} else if (type = 'response') {
Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");}
}
}//end of listeners
}//end of proxy
});
store.load();
store.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(store.data.items[0].data['name']); //data printed successfully here
console.log(store.getProxy().getReader().rawData);
console.log(store);
};
});
function syncStore(rowEditing, changes, r, rowIndex) {
store.save();
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var grid = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
height:'30%',
store: store,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%'
}
},
tdAttrs: {
style: {
height:'10%'
}
}
},
defaults: {
// applied to each contained panel
bodyStyle:'border:0px;',
xtype:'displayfield',
labelWidth: 120
},
items: [{
fieldLabel: 'My Field1',
name :'nooflicenses',
value: store //How to get the data here
//bodyStyle:'background-color:red;'
},{
fieldLabel: 'My Field',
name:'name',
value:'name'
}],
renderTo: document.getElementById("grid1")
});
});
</code>
Ext.grid.Panel control is totally configurable so it allows to hide different parts of the grid. In our case the way to hide a headers is adding property: hideHeaders:
Ext.create("Ext.grid.Panel", {
hideHeaders: true,
columns: [ ... ],
... other options ...
});
If you still would like to adopt another solution, the more complex solution I have think about is the use of XTemplate for building table dynamically. (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate). In this approach you write the template describing how the table will be built.
Otherwise, I still recommend you to deal with the former solution rather than the latter one. The latter approach opposes the basic idea of Sencha ExtJS: use ExtJS library's widgets, customize them in the most flexible way and then automate them by creating store and model.
The most "native" way to show data is by use Ext.grid.Panel.
Example:
Ext.application({
name: 'LearnExample',
launch: function() {
//Create Store
Ext.create ('Ext.data.Store', {
storeId: 'example1',
fields: ['name','email'],
autoLoad: true,
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
Ext.create ('Ext.grid.Panel', {
title: 'example1',
store: Ext.data.StoreManager.lookup('example1'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
}
});
The grid can be configured in the way it mostly customized for user's needs.
If you have a specific reason why to use Ext.panel.Panel with a table layout, you can use XTemplate, but it more complicate to bind the data.
I need the tab-panels to fit browser window size. I have used card layout, and it is not re-sizing to fit the browser window. I think i'm missing some properties in my viewPort.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'tabP1' }
},
{
xtype: 'panel',
items: { xtype:'tabP2' }
}
,
{
xtype: 'panel',
items: { xtype:'tabP3' }
}
]
});
},
2.) One of my tabpanels; I am using absolute layout. I am using this layout because it's easy to set form components where i ever i desire it to be. Therefore, i would like a solution that works with the same layout.
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.tabP1',
// height: 250,
// width: 726,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
UPDATE 2
UPDATE 2
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'tabP1'
},
{
xtype:'tabP2'
}
,
{
xtype:'tabP3'
}
]
});
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
},
I get an error when i use your code, saying that this.getViewport().getLayout().setActiveItem(1) is not a function. I think this is because i used border layout. How can i resolve this ?
Your problem is "over-nesting" Why are you putting 'tabPFoo' inside a panel with no layout? They are at best, redundant, also causing the layout system to spend more cycles when it's not needed.
Ext.require('*');
Ext.onReady(function(){
var vp = new Ext.container.Viewport({
layout: 'card',
items: [{
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 1'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 2'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 3'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.previousSibling().previousSibling();
vp.getLayout().setActiveItem(next);
}
}
}]
});
});
Obviously that's not MVC style, but that's the structure the layout should take.
Im just trying to simply load some json data into my combobox using a basic data store. Here is my json data:
{"services": [{"id": 1, "name": "dropbox"}, {"id": 2, "name": "facebook"}, {"id": 3, "name": "twitter"}]}
Here is my extjs 4 code:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'json',
url: '/account/service/list',
reader: {
root: 'services',
totalProperty: 'totalCount'
}
}
});
store.load();
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
store:store
}]
}]
}]
});
});
Everything is being done on localhost so no cross domain stuff. I've been going through documentation but just can't figure out what im doing wrong.
As always any tips is much appreciated!
Update:
I edited some changes to the datastore and am getting a bit farther:
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services',
type: 'json'
}
}
});
store.load();
Now when the page loads or I attempt to click the combobox the url it is addressing is:
GET /account/service/list?_dc=1318340688155&page=1&start=0&limit=25
From my reading this looks like jsonp but I dont know where the page,start, and limit params come from?
Update2:
Thanks to the help from Molecule Man I was able to sort this out:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
autoLoad: true,
proxy: {
limitParam: undefined,
startParam: undefined,
paramName: undefined,
pageParam: undefined,
noCache:false,
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services'
}
}
});
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
queryMode:'local',
emptyText: 'Select Service',
store:store,
displayField: 'name',
valueField: 'id'
}]
}]
}]
});
});
Hope this helps anyone else :)
Your combobox' config doesn't contain displayField (defaults to 'text') and valueField(defaults to displayField's value) which are required:
items: [{
xtype:'combo',
displayField: 'name',
valueField: 'id',
store:store
}]