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',
}
]
}
]
})
});
}
});
Related
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.
Once I have signed in I want the sign in page to be replaced with the dashboard page but for some reason I can't get the card to change as I cant get a refrence to it that will accept the setActiveItem method.
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MainPanel'
],
name: 'MyApp',
controllers: [
'MainController'
],
launch: function() {
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
}
});
MainController.js
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
alias: 'controller.mainController',
config: {
},
init: function(application) {
this.control({
'button[action=submitSigninemEmail]': {
tap: 'signinemEmailFnc'
}
});
},
signinemEmailFnc: function() {
var email_fld = Ext.getCmp('signinemEmail').getValue();
var password_fld = Ext.getCmp('signinemPassword').getValue();
var md5password = MD5(password_fld);
Ext.data.JsonP.request({
url: 'http://www.solumac.co.uk/clients/uwana/v2/ajax/sencha.php',
params: {
method: 'signinem',
callback: 'signinem',
email: email_fld,
password: md5password
},
callback: function(result, params) {
if (result === true) {
if (params.status === true){
console.log('signed in');
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
} else {
console.log(params.message);
}
}
}
});
}
});
MainPanel.js
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.Panel',
alias: 'widget.mainPanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
id: 'signinem',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'signinemTitleBar',
title: 'Sign In',
items: [
{
xtype: 'button',
id: 'signinemButtonBack',
ui: 'back',
text: 'Back'
},
{
xtype: 'button',
align: 'right',
id: 'signinemButtonSignUp',
text: 'Sign Up'
}
]
},
{
xtype: 'container',
id: 'signinemPadding',
padding: 10,
width: '100%',
items: [
{
xtype: 'fieldset',
id: 'signinemFacebookSet',
title: 'Sign In with Facebook',
items: [
{
xtype: 'button',
id: 'signinemFacebook',
margin: 10,
width: '',
text: 'Facebook'
}
]
},
{
xtype: 'fieldset',
id: 'signinemEmailSet',
title: 'Sign In with Email',
items: [
{
xtype: 'textfield',
id: 'signinemEmail',
margin: 10,
label: 'email'
},
{
xtype: 'passwordfield',
id: 'signinemPassword',
margin: 10,
label: 'Password'
},
{
xtype: 'checkboxfield',
action: 'changeField',
id: 'signinemShow',
itemId: 'mycheckbox',
margin: 10,
label: 'show password',
labelWidth: '80%'
},
{
xtype: 'button',
action: 'submitSigninemEmail',
id: 'signinemSubmit',
margin: 10,
text: 'Submit'
}
]
}
]
}
]
},
{
xtype: 'container',
id: 'dashboard',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'dashboardBar',
title: 'Dashboard'
}
]
},
listeners: [
{
fn: 'onSigninemShowCheck',
event: 'check',
delegate: '#signinemShow'
},
{
fn: 'onSigninemShowUncheck',
event: 'uncheck',
delegate: '#signinemShow'
}
]
},
onSigninemShowCheck: function(checkboxfield, e, options) {
alert('show password');
},
onSigninemShowUncheck: function(checkboxfield, e, options) {
alert('hide password');
}
});
I believe the problem lies with the line...
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
...which doesn't work, but have drawn a complete blank as to what should replace it.
if you change
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
to
Ext.Viewport.add(Ext.create('MyApp.view.MainPanel'));
in your app.js, then in your controller change
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
to
Ext.Viewport.setActiveItem(Ext.create('dashboard'),{
// other stuff
});
and add dashboard to your views array in app.js I believe it should work
You can't just do a setActiveItem of the id string like you did above:
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
You first have to get the reference to the component using Ext.getCmp().
Also, MyApp.views.MainPanel is a class name, and not an instance. You would need to get the specific instance object, and then use it to set the active item.
Here's some code that will work for you:
var mypanel = Ext.ComponentQuery('mainPanel')[0];
var active = Ext.getCmp('dashboard');
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'});
I'm also including a 1 file application that does what you want:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c1');
comp.setActiveItem(active);
},
text: 'one'
},
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c2');
comp.setActiveItem(active);
},
text: 'two'
}
]
},
{
xtype: 'container',
html: 'Hello, first container',
id: 'c1'
},
{
xtype: 'container',
html: 'hello, second container',
id: 'c2'
}
]
}
});
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 have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"
In one of my panels i have a form panel
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
}
I wish to bind data to this and have the following code.
var form = Ext.getCmp('formJobSummary').getForm();
form.loadRecord(user);
I am getting:
Ext.getCmp("formJobSummary") is undefined
So obviously the loadRecord is out of scope. Given that my architecture is from the designer and has 2 files. Where do i put this loadRecord statement.
MyPanel.js
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['quotedPrice', 'name']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
quotedPrice: 'test',
name: 'test'
});
Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',
initComponent: function () {
var me = this;
me.callParent(arguments);
me.down('button[text=Submit]').on('click',
me.onSubmitBtnClick, me);
me.down('button[text=Cancel]').on('click',
me.onCancelBtnClick, me);
},
onSubmitBtnClick: function () {
var conn = new Ext.data.Connection();
var est = Ext.getCmp('estimate');
alert(est.getValue());
conn.request({
method: 'POST',
url: 'tmp.php',
params: {
foo: "bar"
},
success: function (responseObject) { alert(responseObject.responseText); },
failure: function () { alert(est); }
});
},
onCancelBtnClick: function () {
}
});
var form = Ext.getCmp('formJobSummary').getForm(); //returns form1
form.loadRecord(user);
ui/MyPanel.js
Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',
height: 600,
width: 950,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'JobPanel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
id: 'quotedPrice',
name: 'quotedPrice',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
id: 'clientPO',
name: 'clientPO',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
id: 'jobQuantity',
name: 'jobQuantity',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
id: 'filesOver',
name: 'filesOver',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
id: 'previousJobId',
name: 'previousJobId',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
id: 'estimate',
name: 'estimate',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
{
xtype: 'panel',
title: 'Parts'
},
{
xtype: 'panel',
title: 'Process'
},
{
xtype: 'panel',
title: 'Invoice'
}
]
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'FooterPanel',
flex: 1
}
]
});
me.callParent(arguments);
}
});
During the execution of your statement var form = Ext.getCmp('formJobSummary').getForm(); obviously the formJobSummary is undefined (ie, it doesn't exist!!). Your Ext.define doesn't create a instance of the view. The code you are trying to execute is on a global scope.. meaning it will get executed as soon as the javascript file is loaded. Ideally, It should get called after an instance of the class is created.
So, your solution will be identify, when you need to load your form with the data you have. For example, you might want to load the data when you render the form or when some button is clicked etc. That should help you solve the problem.