Why no data is displayed on the screen?
Or tell me a good/correct way to fix or avoid this.
Thank you.
[in view block]
Ext.define('CreditQuery.view.QueryResult', {
extend: 'Ext.tab.Panel',
xtype: 'queryresult',
config: {
defaults: {
defaultType: 'textfield'
},
items: [{
title: 'Credit',
},
items: [{
label: 'CustNo',
name: 'ACCOUNT_ID'
},{
label: 'CustName',
name: 'ACCOUNT_TEXT'
}]
}]
}
})
[in controller block]
function setData(data){
data = {
ACCOUNT_ID: "FN2180004",
ACCOUNT_TEXT: "John1218"
}
Ext.ComponentQuery.query('queryresult textfield')[0].setValue(data.ACCOUNT_ID);
Ext.ComponentQuery.query('queryresult textfield')[1].setValue(data.ACCOUNT_TEXT);
Ext.ComponentQuery.query('main')[0].push([{ xtype: 'queryresult' }]);
}
Access the textfields like this: -
Controller-
refs: {
customerNumberField : 'textfield[name="ACCOUNT_ID"]',
customerNameField : 'textfield[name="ACCOUNT_TEXT"]'
}
function setData(data){
data = {
ACCOUNT_ID: "FN2180004",
ACCOUNT_TEXT: "John1218"
}
this.getCustomerNumberField().setValue(data.ACCOUNT_ID);
this.getCustomerNameField().setValue(data.ACCOUNT_TEXT);
}
Related
I'm new to Sencha Touch...
I've been searching and asking people for hours, but cannot figure out why my detail view does not get the data (using setRecord).
I have not been able to find an example that uses Ext.NavigationView to push a view that uses the data from setRecord, so I suspect I'm doing something wrong there.
I have a tabbed view. First tab shows a list of items. Click an item disclosure to see details for that item. The detail view appears, but with no any data.
The tabs are setup in the launch function of ViewPortController.
The main view in the first tab is the PeopleListView. All the people appear in the list.
The PeopleListView is added to an Ext.NavigationView. A reference to the Ext.NavigationView is added to the PeopleListView so it can be used later
PeopleListViewController has a function, showDetailView, that is successfully called when a disclosure button is tapped.
The controller's showDetailView function
sets the record (which contains the correct data) on the personDetailView,
retrieves the instance of the Ext.NavigationView and pushes the PersonDetailView.
The record value passed to showDetailView has the correct data.
When personDetailView appears, the fields have no data.
ViewPortController:
launch: function() {
// var personDetailView = {
// xtype: 'persondetailview'
// }
var pplView = Ext.create('PeopleApp.view.PeopleListView');
var pplNavView = Ext.create('Ext.NavigationView', {
title: 'People',
iconCls: 'home',
useTitleForBackButtonText: true,
});
pplView.setNavigationView(pplNavView);
pplNavView.add(pplView);
. . .
var mainViewPort = getMainViewPort();
mainViewPort.setItems([pplNavView, . . .]);
},
PersonModel:
Ext.define('PeopleApp.model.PersonModel', {
extend: 'Ext.data.Model',
requires: ['Ext.data.proxy.Rest'],
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'gender', type: 'string' },
{ name: 'note', type: 'string' }
],
proxy: {
type: 'rest',
url: '/app/data/people.json',
reader: {
type: 'json',
rootProperty: 'people'
}
},
}
});
PeopleListViewController:
Ext.define('PeopleApp.controller.PeopleListViewController', {
extend: 'Ext.app.Controller',
xtype: 'peoplelistviewcontroller',
config: {
refs: {
peopleListView: 'peoplelistview',
personDetailView: 'persondetailview',
peopleView: 'peopleview',
},
control: {
peopleListView: {
discloseDetail: 'showDetailView'
}
}
},
showDetailView: function(view, record) {
console.log("record.data.name=" + record.data.name);
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
//var detailView = this.getPersonDetailView();
detailView.setRecord(record);
var navView = view.getNavigationView();
navView.push(detailView);
},
launch: function() { this.callParent(arguments); },
init: function() { this.callParent(arguments); },
});
PersonDetailView:
Ext.define('PeopleApp.view.PersonDetailView', {
extend: 'PeopleApp.view.BaseView',
xtype: 'persondetailview',
requires: [
'Ext.form.FieldSet',
'Ext.form.Text',
'Ext.form.TextArea'
],
config: {
title: "Person Details",
scrollable: true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]}
]}
});
Can you tell me why detailView.setRecord(record) does not get the data set in the fields of DetailViewController, and what I need to do differently?
I am not sure but you should use below code in your Person detail view:
items: [
{
xtype:'formpanel',
id:'personDetailViewForm',
items:[{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name: ',
required: true
}, {
xtype: 'textfield',
name: 'age',
label: 'Age: ',
required: false
}, // etc.
]
}]
}]
and in the personListViewController you can set that form's values instead of setting records to the view like:
var detailView = Ext.create('PeopleApp.view.PersonDetailView');
var personDetailViewForm = detailView.down('#personDetailViewForm ');
personDetailViewForm .setValues(records);
Note that records object property names and form fields names must match and if records doesn't work try with records.data.
I want my view access a function was defined in my controller.
If i define a function out of define in controller the code works if not i get the error 'Uncaught ReferenceError: refreshSelection is not defined'
Whats is wrong?
View
initComponent: function() {
this.dockedItems = [
{
xtype: 'toolbar',
items: [
{
text: 'Importar',
action: 'selimp',
tooltip: 'Importar TXT'
},{
text: 'Excluir',
action: 'delete',
tooltip: 'Deletar Registros'
},{
text: 'Excluir Todos',
action: 'deleteAll',
tooltip: 'Deletar todos os Registros'
},{
text: 'Transferir Dados',
action: 'transfDados',
tooltip: 'Transferencia de registros'
}
]
},{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'GridStore',
displayInfo: true,
emptyMsg: "Nenhum registro encontrado."
}
];
this.callParent(arguments);
this.getView().on('refresh', refreshSelection , this);
this.selModel.on('select', selectRow , this);
this.selModel.on('deselect', deselectRow , this);
}
Controller
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
stores: ['GridStore'],
models: ['Espelho'],
views: ['GridView'],
refs: [ {ref: 'GridV',selector: 'grid'} ],
init: function() {
//declaracao dos controles dos botoes
this.control({
'gridV': {
deselect: this.deselectRow
},
'gridV': {
select: this.selectRow
},
'gridV': {
refresh: this.refreshSelection
}
});
},
selectRow: function(){
console.log('selectRow-1');
},
deselectRow: function(){
console.log('deselectRow-1');
},
refreshSelection: function(){
console.log('refreshSelection-1');
},
........
Man you're doing it wrong!
You can't use the Controller Reference to place a controller action.
Instead use the same CSS-like selector of your grid.
All functionality must be in your controller. The controler action (this.Control) will bind the function with the event.
Your controller must look like this:
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'GridV',
selector: 'grid'
}
],
selectRow: function(rowmodel, record, index, eOpts) {
console.log('Foo');
},
init: function(application) {
this.control({
"grid": {
select: this.selectRow
}
});
}
});
In your view just eliminate the business code.
Ext.define('ImpPdf.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.grid.Panel',
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View',
'Ext.toolbar.Paging'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
store: 'GridStore',
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'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'GridStore'
}
]
}
]
});
me.callParent(arguments);
}
});
I currently have a list that is coming through a store fine, and the itemTpl is putting a div inside each list item with a specific ID. What I want to do know is use a controller to execute different functions on each specific list item when it is tapped. I have a controller set up but it doesn't seem to be referencing it.
Any help would be great
View:
Ext.define('tourApp.view.TourInfo', {
extend: 'Ext.List',
xtype: 'TourInfo',
config: {
navigationBar: {
hidden: true
},
title: 'Tour Info',
iconCls: 'MyTourInfoIcon nav-schedule',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: '<span class="logo"></span>'
},
{
xtype: 'list',
store: 'TourInfoList',
id: 'lolol',
itemTpl: '<div id="TIList{id}" class="TIList"><div class="TIListTitle">{title}</div></div>'
}
]
}
});
Controller:
Ext.define('tourApp.controller.TourInfo', {
extend: 'Ext.app.Controller',
config: {
refs: {
Tdetails: 'TourInfo',
main: 'TourInfo'
},
control: {
"TourInfo list #TIList1": {
tap: 'test'
}
}
},
test: function() {
console.log('Success');
}
});
Use the select event for this..
control: {
'TourInfo list': {
select: function(list, record, eOpts) { console.log('test'); }
}
}
I am trying to add images to a nested list using the getItemTextTpl method of NestedList. Can you please take a look at the following code and let me know how to fix it? This was developed using Sencha Architect. Thanks for your help.
Ext.define('myapp.view.ListContainer', {
extend: 'Ext.Container',
alias: 'widget.listcontainer',
config: {
layout: {
type: 'fit'
},
tpl: [
''
],
items: [
{
xtype: 'nestedlist',
id: 'myList',
itemId: 'mynestedlist4',
detailCard: {
xtype: 'mytabs'
},
store: 'myStore',
toolbar: {
xtype: 'titlebar',
docked: 'bottom',
ui: 'dark'
}
}
],
listeners: [
{
fn: 'getItemTextTpl',
event: 'getItemTextTpl',
delegate: '#myList'
}
]
},
getItemTextTpl: function(node) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Ext.define('myapp.view.myList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.mynestedlist',
config: {
id: 'myList',
detailCard: {
xtype: 'mytabs'
},
displayField: 'text',
store: 'myStore'
},
getItemTextTpl: function(recordnode) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Just a quick tip. FontAwesome is a great way to add beautiful icons easily to you application.
I'm a new sencha learner , what i want to do is adding an image to the nested list text.
I tried to modify kithcensink exapmle code,This is my nestedlist
Ext.require('Ext.data.TreeStore', function() {
Ext.define('Kitchensink.view.NestedList', {
requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Kategori'],
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'nestedlist',
store: {
type: 'tree',
id: 'NestedListStore',
model: 'Kitchensink.model.Kategori',
root: {},
proxy: {
type: 'ajax',
url: 'altkategoriler.json'
}
},
displayField: 'text',
listeners: {
leafitemtap: function(me, list, index, item) {
var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
editorPanel.setRecord(list.getStore().getAt(index));
if (!editorPanel.getParent()) {
Ext.Viewport.add(editorPanel);
}
editorPanel.show();
}
}
}]
}
});
});
I modified the store file
var root = {
id: 'root',
text: 'Lezzet Dünyası',
items: [
{
text: 'Ana Menü',
id: 'ui',
cls: 'launchscreen',
items: [
{
text: 'Et Yemekleri',
leaf: true,
view:'NestedList3',
id: 'nestedlist3'
},
{
text: 'Makarnalar',
leaf: true,
view: 'NestedList2',
id: 'nestedlist2'
},
{
text: 'Tatlılar',
leaf: true,
view: 'NestedList4',
id: 'nestedlist4'
},
{
text: 'Çorbalar',
view: 'NestedList',
leaf: true,
id: 'nestedlist'
}
]
}
]
};
How should I edit the code to add image near the nested list text ?
For example , in this site you can see a nested list example , I need an images near Blues,Jazz,Pop,Rock.
Generally, you can do more than what you need by customizing your getItemTextTpl (place it into your Ext.NestedList definition, for example:
getItemTextTpl: function(node) {
return '<span><img src="image_url" alt="alternative_text">{text}</span>';
}
Define whatever template you like through that returning string.