I add a dataview in an carousel form and it shows up as a list. Then I delete several items of the dataview, but the list in carousel view doesn't change. What should I do to refresh the view?
I have tried several methods such as 'remove()', 'removeAll()', 'destroy()', 'refresh()', but it has no effect.
Model:
Ext.define('Chihiro.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [ 'id', 'name', 'nickname', 'signiture', 'gender', 'birthday', 'school', 'job', 'portrait', 'interests', 'dis'],
proxy: {
type: 'localstorage',
id: 'friends'
},
autoLoad: true
}
});
dataview:
Ext.define('Chihiro.view.userlist.List', {
extend: 'Ext.DataView',
xtype: 'userlist',
store: {
model: 'Chihiro.model.User'
},
config: {
ui:'loans',
useComponents: true,
defaultType: 'listitem',
emptyText: '<div style="margin-top: 20px; text-align: center">没有找到任何人哦</div>',
deselectOnContainerClick: false
}
});
Panel:
Ext.define('Chihiro.view.contact.List', {
extend: 'Ext.Carousel',
xtype: 'contactpanel',
id: 'contactnavigationview',
layout: 'vbox',
config: {
fullscreen: true,
//autoDestroy: false,
scrollable: true,
//defaultBackButtonText: '返回',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '好友'
}
]
}
});
You will need to re-load the store in order to refresh the dataview.
Methods like remove(), removeAll(), destroy() and refresh() will definitely won't have any effect.
When you change the items inside a store, you need to call load() method on your datastore. This will essentially refresh your dataview.
yourStoreForDataView.load();
Useful Post : Sencha-touch : refresh list : store
Related
I built a view and I want to do some manipulation of the elements, after the view has been painted.
I am trying to use the "painted" event with no avail.
Any ideas why?
Ext.define('TestApp.view.phone.RegisterViewPhone', {
extend: 'Ext.Panel',
xtype: 'RegisterViewPhone',
config: {
items: [
{
xtype: 'Header'
},{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT'
},{
xtype: 'Footer'
}
],
listeners: [
{
delegate: '#thePanel',
event: 'painted',
fn: 'onPainted'
}
]
},
onPainted: function () {
alert('hey!');
}
});
You can attach listeners to that particular element like
{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT',
listeners: {
painted: function(){
alert('hey!');
}
}
}
As painted is not dependent on individual element and it acts on page scope also U can write it in views directly
items: [
],
listeners: {
painted: function () {
alert('hey!');
}
In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.Button'
],
config: {
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Business Login',
itemId: 'login',
items: [
{
xtype: 'emailfield',
itemId: 'email',
label: 'E-Mail',
name: 'email',
required: true
},
{
xtype: 'passwordfield',
itemId: 'password',
label: 'Passwort',
name: 'password',
required: true
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
cls: 'button-blue',
text: 'Login'
},
{
xtype: 'panel',
itemId: 'loggedInPanel',
cls: 'logged-in-panel',
tpl: [
'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
],
hidden: true,
margin: '10 0'
}
]
}
});
In my controller, I want to use a reference to this panel like this:
config: {
refs: {
loginPanel: 'loginPanel',
navigationView: '#morenavigation',
loggedInPanel: '#loggedInPanel',
loginButton: '#loginButton'
}
}
In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?
launch: function() {
var me = this,
sessionInfo = Ext.getStore('SessionInfo');
console.log(me.getLoginPanel()); <-- undefined
if (null !== sessionInfo.getAt(0).get('sessionId')) {
me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
}
}
Is anything actually creating an instance of your view?
Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.
The correct way of using the ref in my example would be:
refs: {
loginPanel: {
autoCreate: true,
forceCreate: true,
xtype: 'loginPanel'
}
}
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
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']
}
});
I've seen quite a few examples of a sencha touch app with a nestedList that creates a view within the getDetailCard method and all of that works fine. BUT I have not seen this implemented in an MVC setup. More specifically, a splitview MVC app where the nestedList is docked to the left and the detail pane to the right.
I can use setActiveItem to display a fullscreen detail view with the relevant data all day but when doing so, the left docked nestedlist is removed. How do I keep the split-view setup and update the detailView?
Controller: Products.js
/**
* #class Products
* #extends Ext.Controller
*/
Ext.regController('Products', {
// index action
index: function(){
if ( ! this.indexView){
this.indexView = this.render({
xtype: 'ProductIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
detail: function(options){
var record = options.params[0].attributes.record.data;
console.log(record);
if ( ! this.detailView){
this.detailView = this.render({
xtype: 'ProductDetail',
//data: record
});
//var detailsView = this.indexView.query('#detailsView')[0];
this.detailView.update(record);
}
//this.application.viewport.setActiveItem(this.detailView, options.animation);
}
});
Model: Product.js
Ext.regModel('Product', {
fields: [
{name: "id", type: "int"},
{name: "pid", type: "int"},
{name: "type", type: "string"},
{name: "status", type: "string"},
{name: "title", type: "string"},
{name: "content", type: "auto"},
{name: "date", type: "string"},
{name: "modified", type: "string"}
]
});
MVCApp.ProductStore = new Ext.data.TreeStore({
model: 'Product',
autoLoad: true,
storeId: 'ProductStore',
proxy: {
type: 'ajax',
id: 'ProductStore',
url: 'data/nestedProducts.json',
reader: {
type: 'tree',
root: 'items'
}
}
});
View: ProductIndexView.js
KCI.views.ProductIndex = Ext.extend(Ext.Panel, {
layout: 'hbox',
dockedItems: [
{
dock: 'left',
xtype: 'nestedlist',
width: '320',
height: '100%',
store: 'ProductStore',
displayField: 'title',
useToolbar: Ext.is.Phone ? false : true,
getDetailCard : function(record, parentRecord){
Ext.dispatch({
controller : 'Products',
action : 'detail',
historyUrl : 'Products/index',
params : [record, parentRecord]
});
}
}
],
items: [
{
xtype: 'ProductDetail',
itemId: 'detailView',
width: "704",
height: '100%'
}
]
});
Ext.reg('ProductIndex', KCI.views.ProductIndex);
View: ProductDetailView.js
KCI.views.ProductDetail = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: true,
background: '#464646',
html: '<h1>Product Detail</h1>',
tpl: ['{title}<br />{id}<br />{pid}<br />{leaf}<br />{date}<br />{modified}<br />{type}<br />{status}<div>{content}</div>']
});
Ext.reg('ProductDetail', KCI.views.ProductDetail);
Try creating a sub viewport which will contain detail pane. Then you can just setActiveItem for that viewport instead of the application viewport.
I have the answer, this will slide the detail card out, update it and slide it back in.
In my Products controller, I needed to alter my detail view:
detail: function(options)
{
this.currentItem = options.params[0].attributes.record.data;
var rightPanel = this.application.viewport.query('#rightPanel')[0];
if ( ! this.detailView)
{
this.detailView = this.indexView.query('#detailView')[0];
this.dummyView = this.indexView.query('#dummyView')[0];
this.dummyView.on('activate', function()
{
this.detailView.update(this.currentItem);
rightPanel.setActiveItem(this.detailView, {type: 'slide'});
}, this);
}
rightPanel.setActiveItem(this.dummyView, {type: 'slide', reverse: true});
}
Then in my Product Index view, create a sub panel and a dummyview:
var rightPanel = new Ext.Panel({
layout: 'card',
xtype: 'rightPanel',
itemId: 'rightPanel',
items: [
{
xtype: 'ProductDetail',
itemId: 'detailView',
width: "704",
height: '100%',
html: 'right panel'
},
{
itemId: 'dummyView'
}
]
});
EDIT: Wanted to reference my source, and highly talented ST dev: CAM