Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
items: [
{
xtype: 'button',
docked: 'right',
height: 29,
hidden: true,
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
grouped:true,
pinHeaders:false,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
}
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
My Store
I use some codes in my store
sorters:'id',
grouper:function(record) {
return record.get('id')[4];
When i write grouped:true into the list config , app doesn't run. I don't understand the reason.
I want to see same result like kitchensink example userinterface/list/disclosure section.
add this configartion in your store
groupField:'label'
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.
I am trying to set the 'ui' property of my navigation view to light, but it only shows in the dark theme. Here's my view. What am I missing?
Ext.define('VisitTCMIndy.view.Social', {
extend: 'Ext.navigation.View',
xtype: 'socialcard',
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
ui: 'light',
items: [
{
xtype: 'panel',
title: 'Social',
layout: 'vbox',
items: [
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Facebook',
src: "resources/images/facebookbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Twitter',
src: "resources/images/twitterbutton.png",
flex: 1
}
]
},
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Pinterest',
src: "resources/images/pinterestbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Instagram',
src: "resources/images/instagrambutton.png",
flex: 1
}
]
},
{
xtype: 'button',
text: 'Take a Picture',
style: 'margin:3%'
}
]
}
]
}
});
If you mean that you want to change the ui of the navigation bar of the navigation view, then should do this:
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
navigationBar: {
ui: 'dark'
}
...
Hope this helps
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.
Very new to extjs 4.0. So i could be phrasing this incorrectly.
I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.
testForm.getForm().loadRecord(app.formStore);
However you will see below that my formpanel is nested. So how do i load the form in order to load record
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',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
Here is the code which shows how to populate data in the formpanel:
Ext.onReady(function(){
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
first: 'Ajit',
last: 'Kumar'
});
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first', //this name must match with the field name in the model
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
}
}]
});
form.loadRecord(user);
});
So, the steps are:
Define a model, which must extend Ext.data.Model as the stores and
form expect the date to be in the model format
Create a form panel
Create an instance of the model with the data
Load the data in the form using the model instance