Related
I have implemented the following using sencha 2.3.1:
I have created a sencha app with the command: sencha generate app TempApp c:/TempApp
I have replaced the default app/view/Main.js by
Ext.define('TempApp.view.Main', {
extend: 'Ext.form.FormPanel',
alias : 'widget.login',
config: {
id : 'login',
cls : ['account-login','mobile'],
layout:{
type : 'vbox',
align: 'center',
pack : 'center'
},
defaults:{
width: 240
},
scrollable: {
direction: 'vertical'
},
items:[
// TOP TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : '',
width : undefined
},
// FIELSDSET
{
xtype: 'fieldset',
title: 'login',
items:[
{
xtype: 'emailfield',
name : 'email',
placeHolder: 'email',
value: ''
},
{
xtype: 'passwordfield',
id : 'loginPasswordField',
name : 'password',
placeHolder: 'password',
value: ''
},
{
xtype : 'checkboxfield',
name : 'remember',
//hidden : true,
label : 'remember',
value : 'true',
checked: true,
labelWidth: '80%'
}
]
},
// AND BUTTONS
{
xtype : 'button',
id : 'loginButton',
ui : 'confirm',
text : 'login',
margin: '5',
handler: function(button, evt){
}
},
{
xtype: 'button',
id : 'forgotButton',
text : 'forgot password',
margin: '5',
handler: function(button, evt){
}
},
// BOTTOM TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'bottom',
width : undefined
}
],
listeners: {
initialize: function(view, options){
}
}
}
});
fieldset is not displayed in internet explorer and windows phone
I have read this: http://www.sencha.com/forum/showthread.php?272642 and it seems that there is a problem with fieldsets.
How can I use fieldsets with email and password fields inside in windows phone?
First a useful tool to fix this error is the emulation tool internet explorer 11
F12 > Emulation > Explorer Profile > Windows Phone
This tool can also be useful: Remote HTML5 debugging on Windows Phone with weinre
Finally in the stylesheet of our application located in path touch/resources/css comment the following attribute in wp.css file
~ div:not(.x-msgbox) .x-input-el {/ * visibility: collapse * /}
In the controller we can use the following code for windows phone (the picker div must have a onclick event for the browser wp disregard the input onclick of which are under the mask):
Ext.define('AppName.controller.ControllerName', {
extend: 'Ext.app.Controller',
requires: [
// ...
],
config: {
refs: {
//...
},
control: {
"picker[id='PickerId']":{show:'onPickerShow'}
//...
}
},
onPickerShow: function(picker,o){
if(picker.getId()=='PickerId'){
document.getElementById("PickerId").onclick = Ext.emptyFn;
}
},
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 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 am trying to pull few records from the Database and show it as a list on one of the panels(or screen). But I cant see anything on the screen. Please help me where I'm wrong.
The server returns a JSON response
{"success":true,"savedDeals":[
{"dealId":"17","dealName":"$2 Off Any Sandwich","dealText":"Valid with the purchase of any drink on Tuesday through Thursday from 11am to 4pm. Cannot be combined with other offers.","dealCategory":"Restaurant","dealCount":"0","dealRemaining":99999},
{"dealId":"21","dealName":"$10 OFF Kid's Clothing & Gifts","dealText":"Spend $50 and receive $10 off your total purchase","dealCategory":"Baby\/Kids","dealCount":"3","dealRemaining":3}
]}
The Model looks like :
myapp.models.SavedDeals = Ext.regModel("myapp.models.savedDeals", {
fields: [
{name : "dealId", type: "int"},
{name : "dealName", type : "string"},
{name : "dealText", type : "string"},
{name : "dealImg", type : "string"},
{name : "dealCategory", type : "string"},
{name : "dealCount", type : "int"},
{name : "dealRemaining", type : "int"},
]
});
The store Looks like
myapp.stores.SSavedDeals = new Ext.data.Store({
model: 'myapp.models.savedDeals',
autoload: true,
id : 'savedDealsStore',
proxy: {
type: 'ajax',
url: '/myappfiles/savedDeals.php',
params: {
UserID: '62'
},
reader: {
type: 'json',
root: 'savedDeals',
}
},
});
and the view looks like
myapp.views.DealraiserSavedDeals = Ext.extend(Ext.Panel,{
fullscreen : true,
standardSubmit : false,
dockedItems: [{
xtype: 'toolbar',
title: 'Deals List',
dock: 'top',
items: [{
xtype: 'button',
text: 'Home',
ui: 'Home',
handler: function(){
myapp.views.viewport.setActiveItem(myapp.views.dealraiserHome , 'slide');
}
}]
},
],
items: [{
xtype: 'list',
id : 'savedList',
emptyText : 'No data available.',
store: myapp.stores.SSavedDeals,
itemTpl: '{dealName}'
}]
initComponent: function() {
myapp.stores.SSavedDeals.load();
myapp.views.DealraiserHome.superclass.initComponent.apply(this, arguments);
}
});
Please help, what should I do to fix this issue.
Thanks.
I think the culprit is the fact your are calling a different class' superclass' initComponent method, if that makes sense!
initComponent: function() {
myapp.stores.SSavedDeals.load();
myapp.views.**DealraiserSavedDeals**.superclass.initComponent.apply(this, arguments);
}
You are also missing a comma after the 'items' array just before the initComponent definition.
After making those changes the list was showing up for me on a local copy - the only difference being I loaded the data in as an array rather than from your PHP file.
I have a problem with a store that carries the data in a List, the thing is that the store is doing the load but the List stays in Loading, what I'm doing wrong, thanks
Ext.regModel('Properties', {
fields: [
{name: 'idcounty', type: 'string'},
{name: 'county', type: 'string'}
]
});
store = new Ext.data.Store({
model : 'Properties',
proxy: {
type: 'ajax',
url: 'php/response_grid.php?module=countys',
reader: {
type: 'json',
root: 'results',
totalCount: 'total'
}
},
autoLoad:true
});
var listPanel = {
dockedItems: [
{
title: 'Results',
xtype: 'toolbar',
ui: 'light',
dock: 'top'
}
],
layout: 'fit',
scroll: 'vertical',
items: [
{
xtype: 'list',
itemTpl : '{county}',
store: store,
singleSelect: true,
onItemDisclosure: function(record, btn, index){
}
}
],
flex:1
};
and the json answer from the php
({"total":"67","results":[{"idcounty":"1","county":"Broward"},{"idcounty":"2","county":"Dade"},{"idcounty":"3","county":"Palm Beach"},{"idcounty":"4","county":"Osceola"},{"idcounty":"5","county":"Lake"},{"idcounty":"6","county":"Orange"},{"idcounty":"7","county":"Seminole"},{"idcounty":"8","county":"Volusia"},{"idcounty":"9","county":"Hillsborough"},{"idcounty":"10","county":"Polk"},{"idcounty":"11","county":"Pasco"},{"idcounty":"12","county":"Pinellas"},{"idcounty":"13","county":"Sarasota"},{"idcounty":"14","county":"Manatee"},{"idcounty":"15","county":"Charlotte"},{"idcounty":"16","county":"Alachua"},{"idcounty":"17","county":"Baker"},{"idcounty":"18","county":"Bay"},{"idcounty":"19","county":"Bradford"},{"idcounty":"20","county":"Brevard"},{"idcounty":"21","county":"Calhoun"},{"idcounty":"22","county":"Citrus"},{"idcounty":"23","county":"Clay"},{"idcounty":"24","county":"Collier"},{"idcounty":"25","county":"Columbia"},{"idcounty":"34","county":"Duval"},{"idcounty":"35","county":"Escambia"},{"idcounty":"36","county":"Flagler"},{"idcounty":"37","county":"Franklin"},{"idcounty":"38","county":"Gadsden"},{"idcounty":"39","county":"Gilchrist"},{"idcounty":"40","county":"Glades"},{"idcounty":"41","county":"Gulf"},{"idcounty":"42","county":"Hamilton"},{"idcounty":"43","county":"Hardee"},{"idcounty":"44","county":"Hendry"},{"idcounty":"45","county":"Hernando"},{"idcounty":"46","county":"Highlands"},{"idcounty":"47","county":"Holmes"},{"idcounty":"48","county":"Jackson"},{"idcounty":"49","county":"Jefferson"},{"idcounty":"50","county":"Lafayette"},{"idcounty":"52","county":"Lee"},{"idcounty":"53","county":"Leon"},{"idcounty":"54","county":"Levy"},{"idcounty":"55","county":"Liberty"},{"idcounty":"56","county":"Madison"},{"idcounty":"58","county":"Martin"},{"idcounty":"59","county":"Monroe"},{"idcounty":"60","county":"Nassau"},{"idcounty":"61","county":"Okaloosa"},{"idcounty":"62","county":"Okeechobee"},{"idcounty":"63","county":"Putnam"},{"idcounty":"64","county":"Sumter"},{"idcounty":"65","county":"Taylor"},{"idcounty":"66","county":"Union"},{"idcounty":"67","county":"Wakulla"},{"idcounty":"68","county":"Walton"},{"idcounty":"69","county":"Washington"},{"idcounty":"70","county":"DeSoto"},{"idcounty":"71","county":"IndianRiver"},{"idcounty":"72","county":"SantaRosa"},{"idcounty":"75","county":"St Johns"},{"idcounty":"77","county":"St Lucie"},{"idcounty":"78","county":"Dixie"},{"idcounty":"80","county":"Suwannee"},{"idcounty":"81","county":"Marion"}]})
I got your example to work but I had to change a few things, I wrapped it in an application just to get to work. Specifically I had to move the model AFTER the Application so that the Store was available.
In the above example you just do:
store = new Ext.data.Store({...
I think you need to do:
var stor = new Ext.data.Store({...
Anyway here is the code I got to work, so your data is good...
Ext.ns("Test", "Test.stores");
Test = new Ext.Application({
defaultTarget : 'viewport',
name : 'test',
icon : 'icon.png',
glossOnIcon : false,
tabletStartupScreen : 'tablet_startup.png',
phoneStartupScreen : 'phone_startup.png',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Results',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{idcounty}">{county}</span>',
store : Test.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'idcounty',
type : 'string'
}, {
name : 'county',
type : 'string'
} ]
});
Test.stores.Properties = new Ext.data.Store({
model : 'Properties',
proxy : {
type : 'ajax',
url : 'test.json',
reader : {
type : 'json',
root : 'results',
totalCount : 'total'
}
},
autoLoad : true
});