Related
When I try to put a container as a component in the textfield (according to Button inside of an input field Sencha Touch 2.0) my app crashes. The code below is for you to get an idea of the context, im didnt double check the syntax in the post but when I comment out the last item it works fine . I think it is the xtype: 'container' that generates the error (the error is "undefined function"). What am I doing wrong here? Im so bad at this...
Ext.define('myapp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
},
})
You are right. The problem is the container inside the textfield.
When a textfield is generated and initialized it will set its original value. Since you have changed the component to container and it's not input anymore you get the problem. The initialization process calls the getValue methode of the component. Unfortunately container does not have one and that's rises the exception.
The solution to this problem is quite easy: create your custom textfield and override its getValue method.
Ext.define("MyApp.field.ButtonField", {
extend: "Ext.field.Text",
xtype: "buttonfield",
config: {
label: 'Textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
}
},
getValue: function () {
this.getComponent().down('textfield').getValue();
},
setLabel: function ( label ) {
this.getComponent().down('textfield').setLabel( label );
}
});
Since it has an xtype you can use it as follows:
Ext.define('MyApp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container',
'MyApp.field.ButtonField'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'buttonfield',
label: 'blub'
}
]
}
});
You have to override some more methods (e.g. setValue) if you want to use the buttonfield like a normal field. So you delegate all textfield method calls to the wrapped textfield. But that should be easy now.
How can I wrap very long titles in a form and a fieldset?
I took this code from Sencha's docs and simply added a long title, and added a width. Unfortunately, the title is truncated with ellipsis.
Here's what it looks like:
Here's the modified Sencha source: (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.form.FieldSet)
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
width: 300,
instructions: 'Tell us all about yourself',
items: [
{
xtype: 'textfield',
name : 'firstName',
label: 'First Name'
},
{
xtype: 'textfield',
name : 'lastName',
label: 'Last Name'
}
]
}
]
});
Try the Ext.field.Field labelWrap config.
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
width: 300,
instructions: 'Tell us all about yourself',
items: [
{
xtype: 'textfield',
name : 'firstName',
label: 'First Name',
labelWrap : true
},
{
xtype: 'textfield',
name : 'lastName',
label: 'Last Name',
labelWrap : true
}
]
}
]
});
EDIT
Sorry, I misread part of that.
I will in no way claim to be a CSS expert...however this worked for me:
.x-form-fieldset-title {
white-space: normal;
}
That will affect each of your title, you may want to try and single out just the title that is too long.
Good luck, Brad
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!
In my application I have a one view with topbar and some fields. In this button when I am click the login button I want to move to another view (Dashboard) which is a tabview. So for this I am using viewport. But I am unable to move from one view to another. Here is my code:
app.js
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['TitlePanel', 'dashboardpanel'],
models : [ 'MyModel', 'wishlistmodel' ],
stores : [ 'name', 'wishlistsummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
Ext.Viewport.add([Login, Dashboard]);
}
});
Titlepanel.js
Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
config: {
ui: 'light',
items: [
{
xtype: 'panel',
id: 'LoginScreen',
items: [
{
xtype: 'image',
docked: 'left',
height: 130,
id: 'Logoimage',
ui: '',
width: 170,
src: 'app/images/logo.png'
},
{
xtype: 'titlebar',
cls: 'mytitlebar',
docked: 'top',
height: 100,
ui: 'blue',
items: [
{
xtype: 'label',
height: 36,
html: 'Teritree Business Portal',
id: 'title',
margin: 20,
style: 'font: normal Bold 20px droid sans; color:#AB3951',
width: 396
}
]
},
{
xtype: 'panel',
id: 'LoginPanel',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: 'Login with Teritree Business Credentials',
id: 'Loginlabel',
margin: 20,
style: 'font: normal Bold 30px droid sans',
ui: 'dark'
},
{
xtype: 'fieldset',
height: 84,
itemId: 'LoginField',
margin: '40 0 0 0',
width: 500,
items: [
{
xtype: 'textfield',
id: 'user',
style: 'font: Droid Sans',
label: 'Login User id',
labelWidth: '40%'
},
{
xtype: 'textfield',
height: 35,
id: 'password',
label: 'Password',
labelWidth: '40%'
}
]
},
{
xtype: 'button',
height: 40,
id: 'LoginBtn',
margin: 20,
ui: 'orange',
width: 180,
text: 'Login'
},
{
xtype: 'label',
html: 'If you don\'t have an account yet: Signup at business.teritree.com ',
id: 'signup',
margin: 20,
style: 'font: normal 24px droid sans'
}
]
}
]
}
]
}
});
dashboardpanel.js
Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
id:'dashboardpanel',
fullscreen: true,
tabBarDock: 'bottom',
items: [
mainWindow
]
});
var mainWindow = new Ext.Panel({
title:'main',
iconCls:'home',
layout:'fit',
scroll: 'vertical',
dockedItems: [toolbar,bigButton]
});
var bigButton = new Ext.Button({
dock: 'bottom',
text: 'I should be at the bottom'
});
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Main',
items: [
{
text: 'Reload',
}
]
});
MyContrller.js
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen : '#Login',
dashboardscreen : '#dashboardpanel'
},
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
}
});
Hey i am able to solve this problem finally. Because iwas giving wrong references in controller..here is the controller code:
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
TitlePanel : 'login',
dashboardpanel : 'dashboard'
},
views : [
'TitlePanel',
'dashboardpanel'
],
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.setActiveItem(this.getDashboardpanel(), this.slideLeftTransition);
}
});
Ext.Viewport.setActiveItem(1);
PS: Please notice the viewport case.
Hey #Arindam just put into your MyController file like this,
Ext.define('myapp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen: '#Login',
dashboardscreen : '#Dashboard'
},
control : {
"#LoginBtn": {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function(button, e, options) {
Ext.getCmp('dashboardpanel').show('slide', true)
Ext.getCmp('loginpanel').hide()
}
});
And you have some bugs into dashboardpanel.js file.
I hope this helps :)
I would suggest you to use Ext.navigation.View for this.
You can just add viewport in app.js, then in viewport add navigation view, on that navigation view you can push you TitlePanel, and then form button click in the TitlePanel, just push your dashboardpanel.
I am using ExtJS portal code in my application
I want to make portlet in collapsed state at the time of loading the page. So I have done something like
items: [{
id: 'portlet-1',
title: 'Grid Portlet Texsds',
tools: this.getTools(),
height:200,
**collapsed:true,**
autoScroll :true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this),
'endDrag': Ext.bind(this.onPortletDrag, this),
'resize' :Ext.bind(this.onPortletResize, this)
}
}
I have made collapsed property to true. But because of this when I am trying to expand the portlet [after page load] I can see blank Grid.Plz. refer the attached image.
What is the problem ? do I need to do refresh or something ? because when I set collapsed to false I can see the grid.
Please suggest what is missing here.
This is a code for the getTools: function(){
{
type: 'Minimize',
handler: function(e,target,panelHeader,tool){
//panelHeader.ownerCt.toggleCollapse();
if (panelHeader.ownerCt.collapsed)
{
panelHeader.ownerCt.expand();
}
else {
panelHeader.ownerCt.collapse();
}
}
}
for the first time when the portlet get load it is in collapsed state, Now when I click on cross icon not [the "^" for expand icons ] I can see the Blank grid.
Hope this time I am able to explain well.
I took the Ext JS 4 example portal app and added your code (without the asterisks) to portlet-1. It is properly collapsed on load and expands to show the grid.
I don't think there is anything wrong with the code you've posted. Perhaps you've changed the layout or layout properties of the surrounding container and that is affecting your portlet.
Here is my complete portal.js:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
collapsed: true,
height: 200,
autoscroll: true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});