Appsdk2 rc2 seems to be ignoring the width parameter on columnCfgs for rallygrids.
For example:
xtype: 'rallygrid',
columnCfgs: [
{dataIndex: 'ValueScore', width: 40, text:'Value'}
]
This renders with a 40 pixel width in rc1, but does not in rc2. Is this a bug, or has the parameter changed? Is there a solution for this?
This is a bug in the 2.0rc2 release. For now it can be worked around by including flex: null in your column config to override what the grid is doing incorrectly:
xtype: 'rallygrid',
columnCfgs: [
{dataIndex: 'ValueScore', width: 40, text:'Value', flex: null}
]
A defect has been submitted and this should be fixed for the next release.
It looks like the bug does not affect grids based on a custom store. Here is an rc2 app (you may see the full code here) with Rally.data.custom.Store where width specified in the clumnCfgs has an expected effect:
_createTestSetGrid: function(testsets) {
var testSetStore = Ext.create('Rally.data.custom.Store', {
data: testsets,
pageSize: 100,
});
if (!this.down('#testsetgrid')) {
this.grid = this.add({
xtype: 'rallygrid',
itemId: 'testsetgrid',
store: testSetStore,
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Test Case Count', dataIndex: 'TestCaseCount',
},
{
text: 'Test Case Status', dataIndex: 'TestCaseStatus', width: 200, //width: 40
},
{
text: 'TestCases', dataIndex: 'TestCases',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(testcase){
html.push('' + testcase.FormattedID + '')
});
return html.join(', ');
}
}
]
});
}else{
this.grid.reconfigure(testSetStore);
}
}
With width set to 200 TestCasesStatus column looks like this:
and with width set to 40 like this:
Related
I need to change my title inside a formpanel
Here is my code
view.js
Ext.define('bluebutton.view.BlueButton.Loyalty', {
extend: 'Ext.Container',
xtype: 'loyaltycard',
requires: [
'bluebutton.view.BlueButton.TransactionList',
'bluebutton.view.BlueButton.MemberPopUp',
'bluebutton.view.BlueButton.MemberDetail',
'bluebutton.view.BlueButton.CouponMain',
'bluebutton.store.BlueButton.MemberList',
'bluebutton.store.BlueButton.CouponList',
'Ext.ux.keypad.Keypad',
'Ext.Img',
'Ext.carousel.Carousel'
],
config: {
// iconCls: 'add_black',
// title :'Loyalty Point',
styleHtmlContent: true,
cls: 'styledContent',
//
layout: 'hbox',
border: 3,
ui: 'round',
defaults: {
margin : '10 10 10 10',
padding : 10
},
items :[
{
flex: 1,
xtype :'formpanel',
id:'loyaltyform',
items :[
{
xtype: 'fieldset',
cls :'containerRadious' ,
title: 'Welcome, new member ~<i><u>Kenny</u></i>',
defaults: {
labelWidth: '35%',
style: 'font-size:1.0em'
},
items: [
{
xtype: 'image',
src: 'resources/images/user3.png',
height: 100,
margin:20
},
{
xtype: 'textfield',
name : 'Name',
label: 'Name',
value :'Kenny Chow',
readOnly: true
},
{
xtype: 'textfield',
name : 'Age',
label: 'Age',
value :'20',
readOnly: true
},
{
xtype: 'textfield',
name : 'Point',
label: 'Point Available',
value :'50',
id :'point',
readOnly: true
},
{
xtype: 'textfield',
name : 'lastVisited',
label: 'Last Visited',
id :'lastVisited',
value :'27/12/2012 11:53 AM',
readOnly: true
},
{
xtype:'button',
text: 'Scan',
width : '100%',
id: 'btnScan',
},
]
}
]
},
{
flex: 2,
xtype :'carousel',
cls :'containerRadious' ,
items :[
{
xtype :'keypad',
layout: {
type: 'hbox',
pack: 'center'
},
},
{
xtype:'couponlistcard'
}
]
}
],
}
});
Controller
onbtnAddClick: function (e) {
var loyaltyform = Ext.getCmp('loyaltyform');
var pointAvalaible = Ext.getCmp('point').getValue();
var keyPadValue = Ext.getCmp('keypad_value').getValue();
var consumerID = Ext.getCmp('keypad_value').getValue();
Ext.getCmp('loyaltyform').setTitle('Changed Title');;
}
but i get this error.
**Uncaught TypeError: Object [object Object] has no method 'setTitle'**
Anyone face this problem before? please help
The reason you get the error is because a formpanel has no method setTitle(). To change the title you have to call the setTitle() method of your fieldset, which is inside your formpanel. So give you fieldset an ID and use this:
Ext.getCmp('yourFieldsetID').setTitle('Changed Title');
Check the methods you can use for a panel en fieldset in the Sencha docs:
http://docs.sencha.com/touch/2-1/#!/api/Ext.form.Panel
http://docs.sencha.com/touch/2-1/#!/api/Ext.form.FieldSet
Good luck!
I have a Grid in a Window. When i click on a row of that window and click on the remove button, that row should get removed from the window. (I think i will have to remove it from Store and reload the grid, so the changes will be picked)
I am unable to get the click event and remove the row from the store. I have added the button for this but not able to get the Grid record and remove it from store and reloading it.
My code is as follows;
Ext.define('MyApp.view.Boy', {
extend: 'Ext.window.Window',
alias: 'widget.boy',
height: 800,
width: 900,
layout: {
type: 'absolute'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
height: 500,
width: 800,
title: 'My Grid Panel',
store: 'School',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'id'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'name'
}
]
},
{
xtype: 'button',
height: 40,
width: 150,
text: 'Remove',
listeners: {
click: {
fn: me.removebuttonclick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
removebuttonclick: function(button, e, options) {
console.log('removebuttonclick');
}
});
Something like:
Ext.define('MyApp.view.Boy', {
extend: 'Ext.window.Window',
alias: 'widget.boy',
height: 800,
width: 900,
layout: {
type: 'absolute'
},
initComponent: function() {
var me = this;
var this.grid = Ext.widget({
xtype: 'gridpanel',
height: 500,
width: 800,
title: 'My Grid Panel',
store: 'School',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'id'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'name'
}
]
});
Ext.applyIf(me, {
items: [
this.grid, //oopsie
{
xtype: 'button',
height: 40,
width: 150,
text: 'Remove',
listeners: {
click: {
fn: me.removebuttonclick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
removebuttonclick: function(button, e, options) {
var me = this;
Ext.Array.each(this.grid.getSelectionModel().selected,function(record, index,selectedRows){
me.grid.getStore().remove(record);
});
}
});
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.
I used Extjs tool bar with many buttons.can i know how to apply tool tip for that buttons with delegate pattern
here my toolbar button
xtype: 'toolbar',
dock: 'top',
id: 'toolbar-id',
items: [
{
xtype: 'button1',
id: 'button-id1',
cls: 'tb-btn',
qtipText: 'tool tip description',
qtipTitle: 'tool tip title'
},
{
xtype: 'button2',
id: 'button-id2',
cls: 'tb-btn',
qtipText: 'tool tip description',
qtipTitle: 'tool tip title'
}
]
apply tooltip with using delegate pattern
render: function(Component, eOpts) {
Component.tip = Ext.create('Ext.tip.ToolTip', {
target: Component.el,
delegate: '.tb-btn',
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
var btnData = Component.getComponent(tip.triggerElement.id);
tip.update("<div class='tol-box'><h4 class='tool-tip-title'>" + btnData.qtipTitle + '</h4><p>' + btnData.qtipText + "</p></div>");
}
}
});
}
The code should be like this :
var store = Ext.create('Ext.data.ArrayStore', {
fields: ['company', 'price', 'change'],
data: [
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['Altria Group Inc', 83.81, 0.28],
['American Express Company', 52.55, 0.01],
['American International Group, Inc.', 64.13, 0.31],
['AT&T Inc.', 31.61, -0.48]
]
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Array Grid',
store: store,
columns: [
{text: 'Company', flex: 1, dataIndex: 'company'},
{text: 'Price', width: 75, dataIndex: 'price'},
{text: 'Change', width: 75, dataIndex: 'change'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
grid.getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
}
}
});
});
If you want more examples or details ,you can refer this Site.
I'm trying to dynamically add a component to a container with the hbox layout specified
and have that container re-size itself to accommodate the new component. Currently the
new component is added, but the new and old components are re-sized / or tiled in the
container and the container maintains its size.
Here is a demonstration of the issue I'm having on jsfiddle.
Here is the relevant extjs4 javascript for the demo:
Ext.onReady(function(){
Ext.create ('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
items: [
{
xtype: 'container',
layout: 'hbox',
padding : 5,
items: [
{
xtype: 'container',
id: 'textfieldgroup',
flex: 1,
height: '100%',
border: false,
layout: {
type: 'vbox',
},
defaults: {
flex: 1,
},
items: [
{
xtype: 'textfield',
emptyText: 'type here',
},
],
},
{
xtype: 'button',
flex: .1,
text: '+',
listeners: {
'click' : function () {
var textFieldGroup =
Ext.ComponentQuery.query ('#textfieldgroup')[0];
var newTextField = Ext.widget ('textfield');
textFieldGroup.add (newTextField);
},
}
}
]
}
],
renderTo: Ext.getBody ()
});
});
I have found a suitable solution and my reasoning is that you cannot have a vbox dynamically expand within an hbox container. The added benefit is that this method enables you get rid of one level of nesting. Also using the layout property autoSize: true enables the vbox container to expand and dynamically re-size itself.
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'Group of fields',
width: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
flex: 1,
xtype: 'label',
text: 'Fields',
},
{
xtype: 'button',
flex: 1,
text: '+',
listeners: {
'click': function() {
var textFieldGroup =
Ext.ComponentQuery.query('#textfieldgroup')[0];
var newTextField = Ext.widget('textfield');
textFieldGroup.add(newTextField);
},
}}
]
},
{
xtype: 'container',
layout: {
type: 'vbox',
autoSize: true,
},
id: 'textfieldgroup',
defaults : {
// flex: 1,
},
items : [
{
xtype: 'textfield',
emptyText: 'type here',
}
]
}
]}
],
renderTo: Ext.getBody()
});
});