I need to reassign extra param when load more even fire. But I dont have any idea
Here is my code
List.js
Ext.define('bluebutton.view.BlueButton.TestingList', {
extend: 'Ext.List',
xtype: 'testinglistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
// 'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
indexBar: true,
singleSelect: true,
onItemDisclosure: true,
grouped: true,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.Testing'},
itemHeight :100,
loadingText : 'loading',
id :'testinglist',
plugins: [
{ xclass: 'Ext.plugin.PullRefresh',
refreshFn: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', 'true' );
Ext.getStore('testingstore').load();
},
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
loadNextPage: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', );
Ext.getStore('testingstore').load();
}
},
],
masked: {
xtype: 'loadmask',
message: 'loading...'
}, // masked
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td>',
' <div class="tweet">',
' <h3>{invoiceId}</h3>',
' <h3>Name: {billNumber}</h3>',
' <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
Store.js
Ext.define('bluebutton.store.BlueButton.Testing', {
extend: "Ext.data.Store",
requires: ['bluebutton.model.BlueButton.Testing'],
config: {
grouper: {
groupFn: function (record) {
return record.get('invoiceId')[0];
}
},
model :'bluebutton.model.BlueButton.Testing',
storeId :'testingstore',
autoLoad: true,
pageSize: 5,
clearOnPageLoad: false,
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.Testing', {
extend: 'Ext.data.Model',
config: {
idProperty: 'testingModel',
fields: [
{ name :'invoiceId'},
{ name: 'billNumber' },
{ name: 'invoiceDate' },
{ name: 'invoiceAmount' },
{ name :'downloadLink'},
{ name: 'refresh' },
],
proxy: {
type: 'rest',
url: 'http://192.168.251.108:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
// extraParams: {
// userid: "test",
// // add as many as you need
// },
reader: {
type: 'json',
rootProperty: 'invoice'
},
writer: {
type: 'json',
},
}
}
});
I need to assign extra param "refresh" to true when i refresh the list. On the other hand, if the load more event fire i need to assign param refresh to false. Please give me solution. Thanks
I dont think you can do it the way you ask. But you can listen to the load event and change your refresh parameter there.
{
xtype: 'store',
//Your Code
listeners: {
load: function(store){
store.getProxy.setExtraParam('refresh', false);
}
}
}
Hope it helps
I am developing an Android 2.3.3 app using PhoneGap and Sencha Touch 2 ...
I have an Login view from which i redirect to nested list view in my app ... I used an inline store for the nested list and i defined the type as 'tree' for the store ...
The first time i am trying to load the app and when i click on Login it is giving me an error ... The error is stated below :
Uncaught TypeError: Object [object Object] has no method 'getRootNode' at file:///android_asset/www/sencha/sencha-touch-all.js:15
But after getting the error if i force close the app and open it again everything is working fine ...
My code is :
Login.js
Ext.define("DDLApp.view.Login", {
//extent panel class
extend: "Ext.form.Panel",
//DOM in fieldset
requires: "Ext.form.FieldSet",
xtype: 'formLogin',
id:'loginForm',
config: {
scrollable: 'vertical',
id: 'login',
items: [
{
xtype: "toolbar",
docked: "top",
},
{
xtype: "toolbar", //Toolbar with heading as login
docked: "top",
title: "Login",
ui:'light',
id:"idHeaderTwo",
cls:"clsLoginHeader"
},
{
xtype: 'textfield', //textfield for username
name: 'Username',
required: true,
id:"idUserName",
cls:"clsUserName",
useClearIcon: false
},
{
xtype: 'passwordfield', //textfield for password
name: 'password',
required: true,
id:"idPassword",
cls:"clsPassword",
useClearIcon: false
},
{
xtype: 'button', //Login button
text: 'Login',
ui: 'confirm',
cls:'btnLogin',
width:'30%',
handler: function(SuccessFlag) { //Login button handler
ui: 'confirm',
console.log('Login Button pressed');
var form = Ext.getCmp('login');
//get username and password from form elements
var user = form.getValues().Username;
var pwd = form.getValues().password;
var msg = new Ext.MessageBox();
onLoad();
if(user == "" || pwd == "")
{
var errMsg = '';
if(user == "")
{
errMsg+= 'Username is required<br/>';
}
if(pwd == "")
{
errMsg+= 'Password is required';
}
msg.show({
title: 'LOGIN ERROR',
message: errMsg,
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
}
else
{
form.setMasked({
xtype:'loadmask',
message:'Loading...'
});
//Check for network connectivity
if(onDeviceReady())
{
//Fire a json service
Ext.util.JSONP.request({
url: DDLApp.app.oneTimeServiceUrl,
dataType: "jsonp",
params: {
type:'fetch',
username:user,
password:pwd
},
success: function (result) {
//if username and password matches
if(result.Success == true)
{
//setLocalStorage(result);
localStorage.setItem('userName',user);
localStorage.setItem('userPassword',pwd);
localStorage.setItem('totalData',JSON.stringify(result.Data));
localStorage.setItem('userData',JSON.stringify(result.Data.user));
localStorage.setItem('userIncidentData',JSON.stringify(result.Data.incidentList));
localStorage.setItem('impactData',JSON.stringify(result.Data.impact));
localStorage.setItem('incidentTypeData',JSON.stringify(result.Data.incident_type));
localStorage.setItem('categoryData',JSON.stringify(result.Data.category));
localStorage.setItem('statusData',JSON.stringify(result.Data.statusDropdown));
var indexPanel = Ext.create('DDLApp.view.Main');
Ext.Viewport.add(indexPanel);
Ext.Viewport.setActiveItem(indexPanel,{type: 'slide', direction: 'right'});
form.unmask();
}
else{
msg.show({
title: 'LOGIN ERROR',
message: 'Invalid Username/Password',
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
form.unmask();
}
}
});
}
////If network is not present
else
{
form.unmask();
msg.show({
title: 'NETWORK CONNECTION ERROR',
message: "We're Sorry but it appears your device is not connected to the internet . Please check your internet settings and try again.",
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'Retry',itemId:'retry'}],
fn:function(){
window.location.reload();
}
});
}
}
},
},
{
xtype: 'button', //clear button
text: 'Clear',
width:'30%',
ui: 'confirm',
cls:'btnClear',
style: 'background:#4A4245;',
handler: function() {
this.up('formpanel').reset(); //reset all form elements
},
}
]
},
});
IncidentsList.js
Ext.define("DDLApp.view.IncidentsList", {
extend: "Ext.Container",
xtype: 'incidentsList',
id: 'idIncList',
requires:[
'Ext.dataview.NestedList',
'Ext.data.proxy.Memory',
'Ext.data.TreeStore',
],
alias:'widget.incidentslist',
config: {
id: 'idIncidentList',
layout:'fit',
items: [
{
xtype: "toolbar",
docked: "top",
cls:'clsDDLHeader',
items: [
{xtype:'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentsListTitle',
title:"Welcome",
},
]
},
{
xtype: "toolbar",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo" ,
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "My Incidents",
},
{xtype:'spacer'}
]
},
{
xtype: 'nestedlist',
id:'idIncidentList',
onItemDisclosure:true,
cls:'clsNestedIncidentList',
toolbar:{id:'idNestedIncidentList'},
loadingText: "Loading Incidents...",
emptyText: "<div class=\"empty-text\">No Incidents Found.</div>",
getItemTextTpl: function() {
var tplConstructor =
'<tpl if="TKT_STATUS_NAME == \'CLOSED\'">'+
'<div class="vm_statusRed">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'OPENED\'">'+
'<div class="vm_statusYellow">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'ASSIGNED\'">'+
'<div class="vm_statusGreen">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'PENDING\'">'+
'<div class="vm_statusRed">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'RESOLVED\'">'+
'<div class="vm_statusOrange">'+
'</tpl>'+
'<tpl if="TKT_STATUS_NAME == \'REOPEN\'">'+
'<div class="vm_statusYellow">'+
'</tpl>'+
'<div class="vm_dvList"><h4 class="vm_txtName"><span class="vm_listHeader"><label>Inci.#{TKT_ID} by </label><label class="vm_txtFirstName"><i>{FIRST_NAME:ellipsis(15, true)}</i></label></span><div class="date vm_clsDate">{CREATED_ON:date("d-M-y H:i")}</div></h4>'+
'<div class="vm_title">{TKT_SUBJECT}</div>'+
'<div class="vm_subDesc">{TKT_DESC}</div></div></div>';
return tplConstructor;
},
store: {
type: 'tree',
fields: ['TKT_ID', 'CREATED_ON', 'FIRST_NAME', 'TKT_STATUS_NAME', 'TKT_SUBJECT', 'TKT_DESC', 'SEV_DESC', 'SERVICE_NAME', 'CATEGORY_NAME', {
name: 'leaf',
defaultValue: true
}],
root: {
leaf: false
},
data : localStorage.userIncidentData,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'incidentList'
}
}
},
detailCard: {
xtype: "fieldset",
scrollable: true,
id: "idIncidentDetails",
items: [
{
xtype: 'textfield',
name: 'TKT_SUBJECT',
label: 'Subject',
labelAlign: 'top',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textareafield',
name: 'TKT_DESC',
label: 'Description',
labelAlign: 'top',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SEV_DESC',
label: 'Impact',
labelWidth:'45%',
cls:'vm_textFields',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SERVICE_NAME',
id:'displayIncident',
cls:'vm_textFields',
label: 'IncidentType',
labelWidth:'45%',
disabled:true
},
{
xtype: 'textfield',
label: 'Category',
name: 'CATEGORY_NAME',
cls:'vm_textFields',
id:'getCategory',
labelWidth:'45%',
disabled:true
},
],
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().items.items[0].setHtml(post._data.TKT_SUBJECT);
this.getDetailCard().items.items[1].setHtml(post._data.TKT_DESC);
this.getDetailCard().items.items[2].setHtml(post._data.SEV_DESC);
this.getDetailCard().items.items[3].setHtml(post._data.SERVICE_NAME);
this.getDetailCard().items.items[4].setHtml(post._data.CATEGORY_NAME);
}
}
},
{html:'No Incidents Found....',id:'idEmptyText'}],
},
initialize: function() {
this.callParent(arguments);
var incidentStore = Ext.getCmp('idIncidentList').getStore();
Ext.getCmp("idEmptyText").hide();
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
var getIncidentData = localStorage.getItem('userIncidentData');
var parseIncidentData = JSON.parse(getIncidentData);
this.down("#idIncidentsListTitle").setTitle("Welcome, " + fname);
if(localStorage.userIncidentData != '[""]')
{
Ext.getCmp("idEmptyText").hide();
incidentStore.setData(localStorage.userIncidentData).load();
}
else
{
this.down("#inclist").hide();
this.down("#idEmptyText").show();
var msg = new Ext.MessageBox();
msg.show({
title: 'NO INCIDENTS FOUND',
message: 'No Incidents have reported by this user',
ui:'light',
cls: 'vm_error',
showAnimation: 'fadeIn',
hideAnimation: 'fadeOut',
buttons: [{text:'OK',itemId:'ok'}],
fn:function(){
Ext.emptyFn();
}
});
}
},
});
I need to get rid of this error as soon as possible ... Everything in my app is working fine from the second time onwards ... I think the problem is with the store i have defined ... Please help me guys ... Thanks in Advance ...!!!
My store is defined inline in my IncidentList View itself ...
store: {
type: 'tree',
fields: ['TKT_ID', 'CREATED_ON', 'FIRST_NAME', 'TKT_STATUS_NAME', 'TKT_SUBJECT', 'TKT_DESC', 'SEV_DESC', 'SERVICE_NAME', 'CATEGORY_NAME', {
name: 'leaf',
defaultValue: true
}],
root: {
leaf: false
},
data : localStorage.userIncidentData,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'incidentList'
}
}
},
This is true: Object [object Object] has no method getRootNode
This method is no longer available in ST2, take a look at the API docs.
Actually, this is the only place in ST code that has this method left. Try editing sencha code in TreeStore
removeAll: function() {
this.getRootNode().removeAll(true);
this.callParent(arguments);
},
to
removeAll: function() {
this.getRoot().removeAll(true);
this.callParent(arguments);
},
My problem is... I have a list who is completed by a store and this store comes from a proxy (json). When i clik in a item of the list i need a detail information, and this detail information comes from anothe json.
For example:
ArtistList and ArtistDetail
When i click in an item of artistList i need a call to
http://localhost/json-detail/45
if i click in another item...
http://localhost/json-detail/50 etc...
My problem is that i can't send the parameter to the other view... or maybe the error is in my concept of lists... :S
This is my list view:
var listaArtistas = {
xtype: 'list',
title: 'Artistas',
height: 240,
store: {
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistas',
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var artistDetail = new Ext.create('app.view.ArtistDetail');
artistDetail.setArtistID('45');
panelHomeNav.push(artistDetail);
}
},
itemTpl: tpl
};
This is my detail:
Ext.define('app.view.ArtistDetail',{
extend: 'Ext.Panel',
xtype: 'artistdetail',
style: "background-image:url('/resources/images/fondoartista.png');",
config:{
title: 'Artistas',
iconCls: 'star',
ArtistID: '',
items:
{
title: 'Artistas',
items: [artistDetailPanelContenedor]
}
}});
And need something like this
var listaEspectaculo = {
xtype: 'list',
title: 'Artistas',
store:
{
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistasdetail/'+getArtistID, <<<<<<<<<<------ PROBLEM
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var eventDetail = new Ext.create('app.view.EventDetail');
panelHomeNav.push(eventDetail);
}
},
itemTpl: tplEspectaculo
};
THx for help !!!
Maybe this could help:
How to pass value from controller to data store in sencha touch
handler: function () {
Ext.dispatch({
controller: MyApp.controllers.controller,
action: 'myActionOnController',
id: e.get{'id'}
});
}
You can call ext.dispatch from your "itemtap", then in the controller you can call a new view with you parameters, remember use something like this:
myActionOnController: function (options) {
var city = options.id; //if you want to use your parameters
var newView = Ext.create('MyApp.view.viewOfSomething');
this.getMain().push(newView);
},
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.
I have a layout in which I want to show list items on left-pane. How can I show list items there along with some click event?
{
docked: 'left',
style: 'background:#7b7b7b',
html: 'Here I want to show Ext.List'
}
My List items are Home, About, User, Help.
Your List..instead of "html: 'Here I want to show Ext.List'"
withe the listeners you can creat some tap events
items: [
{ xtype: 'list',
store: 'NaviStore',
id: 'NaviList',
itemTpl: '<div class="contact">{text}',
scrollable: false,
listeners:{
itemtap: function (obj, idx, target){
alert(List is Clicked);
}
}
}]
Your store
Ext.define('MyApp.store.NaviStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.NaviModel',
config: {
model: 'MyApp.model.NaviModel',
data: [
{ text: 'Item1'},
{ text: 'Item2'},
{ text: 'Item3'},
{ text: 'Item4'}
],
autoLoad: true
}
});
Your model
Ext.define('MyApp.model.NaviModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});