sencha 2.3 beta - Touch Grid is not working at run-time using sencha Architect v3.0 - sencha-touch

When running the app.html, after publishing it using sencha architect 3.0, it shows the below error. In complie time am able to see the values populated in this Grid.
But the link seems to be empty in order to fetch the Grid.js for the new 2.3 beta version....
Please let me know any other way to resolve this error.
Error:
Failed to load resource: the server responded with a status of 404 (Not Found)http://sc13-live.sencha.com/touch/touch-2.3.0/src/grid/Grid.js?_dc=1378814671364
// #require #packageOverrides
Ext.Loader.setConfig({
});
Ext.application({
models: [
'MyModel'
],
stores: [
'MyDirectStore'
],
views: [
'MyGrid'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyGrid', {fullscreen: true});
}
});
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Grid',
config: {
height: 297,
width: 444,
store: 'MyDirectStore',
title: 'Grid-5Cols',
columns: [
{
xtype: 'column',
width: 85,
dataIndex: 'no',
text: 'EmpNo'
},
{
xtype: 'column',
width: 89,
dataIndex: 'name',
text: 'EName'
},
{
xtype: 'column',
width: 86,
dataIndex: 'sal1',
text: 'Sal1'
},
{
xtype: 'column',
width: 86,
dataIndex: 'sal2',
text: 'Sal2'
},
{
xtype: 'column',
width: 80,
dataIndex: 'sal3',
text: 'Sal3'
}
]
}
});
Ext.define('MyApp.store.MyDirectStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
data: [
[
'1',
'AceSupplies',
'05',
'1000',
'10'
],
[
'2',
'BestGoods',
'11',
'2000',
'20'
],
[
'3',
'First Choice',
'20',
'3000',
'30'
]
],
model: 'MyApp.model.MyModel',
storeId: 'MyDirectStore',
proxy: {
type: 'direct',
reader: {
type: 'json'
}
}
}
});
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'no',
type: 'int'
},
{
name: 'name',
type: 'string'
},
{
name: 'sal1',
type: 'float'
},
{
name: 'sal2',
type: 'float'
},
{
name: 'sal3',
type: 'float'
}
]
}
});

The new Sencha Touch Grid is not included with standard Sencha Touch, please see below:
Please note that the new Touch Grid component is not a part of Sencha
Touch and is only available as part of Sencha Complete or Sencha Touch
Bundle.
Source: http://www.sencha.com/products/touch/

Related

Moving from one view to another using sencha touch

I'm very new to sencha touch and ive having difficulty in moving in moving from one view to another when i click the add button in my mainview in my practice application.ive tried searching for errors in my console panel but Chrome just shows and empty console. I'm sorry if this seems like a noob query but any help is gratefully accepted.
MainView.js
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
itemId: 'MainView',
navigationBar: {
docked: 'top',
itemId: 'navbar',
items: [
{
xtype: 'button',
align: 'right',
itemId: 'addButton',
iconAlign: 'center',
iconCls: 'add'
}
]
}
}
});
AddForm.js
Ext.define('MyApp.view.AddForm', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
'Ext.field.DatePicker',
'Ext.picker.Date',
'Ext.Button'
],
config: {
items: [
{
xtype: 'fieldset',
itemId: 'myForm',
title: 'Insert Data',
items: [
{
xtype: 'textfield',
label: 'ID',
name: 'id',
required: true
},
{
xtype: 'textfield',
label: 'Name',
name: 'username',
required: true,
autoCapitalize: true
},
{
xtype: 'datepickerfield',
label: 'Date Of Birth',
labelWrap: true,
placeHolder: 'mm/dd/yyyy'
}
]
},
{
xtype: 'button',
itemId: 'saveButton',
margin: 10,
ui: 'confirm',
text: 'SAVE'
},
{
xtype: 'button',
itemId: 'declineButton',
margin: 10,
ui: 'decline',
text: 'DELETE'
}
]
}
});
FirstControl.js(Controller)
Ext.define('MyApp.controller.FirstControl', {
extend: 'Ext.app.Controller',
config: {
refs: {
MainView: 'mainview',
addButton: 'mainview #addButton'
},
control: {
"mainview #addButton": {
tap: 'add'
}
}
},
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push({
xtype:'AddForm',
title:'Insert'
});
}
});
forgot to add the alias:'field'
Change your add function in FirstControl.js(Controller file) file to below.
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push(Ext.create('MyApp.view.AddForm'));
}
It should work.

Change form panel title sencha touch

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!

Sencha Touch 2 add two list vertically?

I want to have a panel with two lists vertically shown.
The below code :
Ext.define('CD.abc.Profile', {
extend: 'Ext.Panel',
layout: 'fit',
fullscreen: true,
config: {
layout: 'vbox',
items: [
{
xtype: 'mylist1'
},
{
xtype: 'mylist2'
}
]
}
});
But the item dont show, page is appearing blank. I can find the elements in the dom structure but they remain invisible in the view.
Can any one help me regarding this?
Try this. Its working for me.
Ext.define('CD.abc.Profile', {
extend: 'Ext.Panel',
config: {
layout:'vbox',
items: [
{
xtype: 'mylist1', // x-type of your list1 view
flex:1
},
{
xtype: 'mylist2', // x-type of your list2 view
flex:1
}
]
}
});
pass the flex property as 1
flex: 1
Try this work's for me:
Ext.define('Sencha.view.Blog', {
extend: 'Ext.Panel',
xtype:'blogpage',
config:{
layout:'fit',
width:'100%',
height:'100%',
title: 'Blog',
iconCls: 'star',
style:'background-color: red;',
items:[
{
xtype:'list',
id:'thelist',
style:'background-color: blue;',
height:'100%', width:'20%',left:0,
store: {
fields: ['name', 'number'],
sorters: 'name',
data: [
{name: 'Shawshank Redemption', number: 5},
{name: 'SuperBad', number: 3},
{name: 'God Father', number: 5},
{name: 'Forest Gump', number: 4.5},
{name: 'A Beautiful Mind', number: 5},
]
},
itemTpl: '{name}'
},
{
xtype:'list',
id:'thelist1',
style:'background-color: blue;',
height:'100%', width:'20%',right:0,
store: {
fields: ['name', 'number'],
sorters: 'name',
data: [
{name: 'Shawshank Redemption', number: 5},
{name: 'SuperBad', number: 3},
{name: 'God Father', number: 5},
{name: 'Forest Gump', number: 4.5},
{name: 'A Beautiful Mind', number: 5},
]
},
itemTpl: '{name}'
}
]
}});

Re-sizing form content to fit browser window - Using Card Layout

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.

Defining View in ExtJS. "Uncaught TypeError: Cannot call method 'substring' of undefined"

I am trying to define a view but I am getting an error
Uncaught TypeError: Cannot call method 'substring' of undefined
/app/view/Sidebar.js
Ext.define('SimpleTodo.view.Sidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.sidebar',
config: {
title: 'Projects & Todo Lists',
tbar: [
{
xtype: 'button',
text: 'Add Project'
},
{
xtype: 'button',
text: 'Add Todo List'
}
],
//store: Ext.data.StoreManager.lookup('projects'),
html: 'Hello world',
width: 200
}
});
Then tried to use it in my app.js
Ext.application({
name: 'SimpleTodo',
views: [
'Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
}
});
What am I missing? Have I defined my views and used it correctly?
Actually it must be like that:
Ext.application({
name: 'SimpleTodo',
requires:[
'SimpleTodo.view.Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
});
}
});