I want set data from controller into formpanel(textfields). But not working.
This is code :
Strore
Ext.define('MyApp.store.CV_FamilyList',
{
extend : 'Ext.data.Store',
requires : ['MyApp.model.CV_FamilyList'],
config :
{
autoLoad : true,
model : 'MyApp.model.CV_FamilyList',
storeId : 'CV_FamilyList',
proxy :
{
type : 'ajax',
url : '?b=Family',
reader :
{
type : 'json',
rootProperty : 'data'
}
}
}
});
Model
Ext.define('MyApp.model.CV_FamilyList',
{
extend : 'Ext.data.Model',
config :
{
fields : [
{
name : 'id'
},
{
name : 'member'
},
{
name : 'firstname'
},
{
name : 'lastname'
}]
},
GetPosition : function() {
var d = this.data, names = [d.Position];
return names.join(" ");
}
});
LIST
Ext.define('MyApp.view.CV_FamilyEdit',
{
extend : 'Ext.form.Panel',
xtype : 'CV_FamilyEdit',
config :
{
scrollable : true,
fullscreen: true,
items: [
{
xtype: 'textfield',
name : 'member',
label: 'member'
},
{
xtype: 'textfield',
name : 'firstname',
label: 'firstname'
},
{
xtype: 'textfield',
name : 'lastname',
label: 'lastname'
}
]
}
});
Controller
onCV_FamilyListItemTap : function(dataview, index, target, record, e, options) {
this.getMain().push(
{
xtype : 'CV_FamilyEdit',
title : record.data.firstname+" "+record.data.lastname,
data : record.data
});
}
............................................................
............................................................
Try this. May be this work.
onCV_FamilyListItemTap : function(dataview, index, target, record, e, options) {
this.getMain().push(
{
xtype : 'CV_FamilyEdit',
title : record.data.firstname+" "+record.data.lastname,
data: record.getData()
});
},
I done
constructor : function(config) {
this.callParent(config);
this.setValues(
{
member : config.data.member,
firstname : config.data.firstname,
lastname : config.data.lastname
})
}
Related
my english is bad and why I write short and direct :o)
my view :
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
maxWidth :800,
maxHeight :400,
config : {
layout : 'fit',
id :'Main',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
my controller :
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[id=Main]',
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}
... ...
concole output from initContainer :
this.x: null
this.id: null
why is x and id NULL instead of 800
Greetings
Volker
yes that's true I'm new.
Have it changed now and still NULL
view
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
name :'Main',
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
contoller
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[name=Main]', // > idMainContainer :'xmain[name="Main"]' <neither
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}
I think you are new in Sencha. Well maxWidth and maxHeight are the config properties of container so you need to include them within config,like this:-
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
Also in the controller if you want to get a reference of a view you will need the name property and not id. Like this:-
View:-
items: [{
name: 'test',
html: 'Test container'
}]
Controller:-
refs:
{
xmain: "xmain",
testContainer: 'container[name="test"]'
}
EDIT
To get the max-width:
this.getXMain().getMaxWidth();
I am very new to Sencha so this is probably a newbie error :)
I am trying to implement page navigation in Sencha. The following scenario WORKS.
I have a Main.js with a Home screen and a Login screen. When I enter credentials I am forwarded to Home.js.
However, I now want to remove the Home from the Main, because it can only be shown after a login. But, after removing the xtype home from the Main.js, it cannot be found anymore. I don't understand why.
Main.js
config : {
tabBarPosition : 'bottom',
items : [{
xtype : 'startview',
}, {
xtype : 'contactform'
}, {
xtype : 'loginform'
}, {
xtype : 'createaccountform'
}, {
xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
}]
}
My controller
Ext.define("MyApp.controller.LoginController", {
extend : "Ext.app.Controller",
xtype : 'logincontroller',
requires : ['Ext.app.Router', 'MyApp.view.Home'],
config : {
refs : {
loginForm : "#loginFormPanel",
home : 'homeview'
},
routes : {
login : 'authenticateuser'
},
control : {
'button[action=login]' : {
tap : "authenticateUser"
}
},
views : ['Login', 'Home']
},
authenticateUser : function(button) {
**// WHEN REMOVING xtype: homeview from MAIN this getter returns undefined (??)**
var activeView = this.getHome();
this.getLoginForm().submit({
url : 'php/process_login.php',
method : 'POST',
success : function(form, result) {
alert('Success and moving to home ' + activeView);
Ext.Viewport.setActiveItem(activeView);
},
failure : function(form, result) {
alert('2');
Ext.Msg.alert('Error', 'failure....' + result);
}
});
}
});
Home.js
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
title : 'Home',
iconCls : 'home',
tabBarPosition : 'bottom',
items : [{
xtype : 'searchview',
}, {
xtype : 'profileview'
}, {
xtype : 'messagesview'
}, {
xtype : 'sensesview'
}]
}
});
app.js
views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],
controllers : ['LoginController'],
So, how can I make sure I still get a reference to Home in the controller (after removing from main)??
Thanks for your help,
Coen
You want to give Home an itemId instead of of an id.
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
itemId : 'home',
xtype : 'homeview',
...
});
And now in your controller, You want to reference it like this:
...
config : {
refs : {
loginForm : "#loginFormPanel",
home : {
autoCreate: true,
selector: '#home',
xtype: 'homeview'
}
},
...
I want to put a simple list into a panel or a container but doesn't work, I can see the titleBar but not the list.. this is the code:
(this Container is inside a TabPanel)
Ext.define("PrimaProva.view.ClientList", {
extend: "Ext.Container",
xtype: 'clientlist',
//fullscreen: true,
config: {
title : 'Gsrid',
iconCls: 'user',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Clients List'
},
{
xtype: 'list',
store: 'Grid',
itemTpl: '{text}',
}
]
},
});
As you can see it is very easy…
the store "Grid" is absolutely not a problem because it works in another view….
Anyways this is the code:
Ext.define('PrimaProva.store.Grid', {
extend : 'Ext.data.Store',
requires : [
'PrimaProva.model.Grid'
],
config : {
model : 'PrimaProva.model.Grid',
data : [
{ text : 'One', amount : 1 },
{ text : 'Two', amount : 2 },
{ text : 'Three', amount : 3 },
{ text : 'Four', amount : 4 },
{ text : 'Five', amount : 5 },
{ text : 'Six', amount : 6 },
{ text : 'Seven', amount : 7 },
{ text : 'Eight', amount : 8 },
{ text : 'Nine', amount : 9 },
{ text : 'Ten', amount : 10 }
],
groupField: 'text',
}
});
Add
layout: 'fit',
fullscreen: true,
to the config of your ClientList
Working Fiddle: http://www.senchafiddle.com/#onlHz
I have a controller defined like this:
Ext.define('MyApp.controller.TestController', {
extend: 'Ext.app.Controller',
config: {
},
showTest: function() {
alert('aaa');
}
});
How can i call the showTest() function? I tried this:
MyApp.controller.TestController.showTest();
But this doesn't work. Anyone any idea how to do this..?? Because i want to call that function from an onClick even in a div. Something like:
<div onclick="call.controller.func(1)">User 1</div>
<div onclick="call.controller.func(2)">User 2</div>
etc.
No, you are doing it wrong.
Suppose that you have a button in your view:
Ext.define('MyApp.view.Login', {
extend : 'Ext.form.Panel',
xtype : 'myapp-login',
config : {
items : [
{
xtype : 'fieldset',
name : 'login-fieldset',
title : 'Login credentials',
instructions: 'Fill in your email and password)',
items : [
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
},
{
xtype : 'button',
name : 'Login',
text : 'Login',
ui : 'confirm'
}
]
}
});
The in your controller, inside your control object:
control : {
'myapp-login button[ui=confirm]' : {
tap : 'showTest'
}
},
// function showTest
showTest: function() {
alert('aaa');
}
So in the above example: when user clicks inside the xtype called myapp-login the controller will execute the showTest() method.
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
});