Simple use case: I want to manually control when I load the store. When the store is loaded, I want the data to populate the list. However, I cannot get it to work.
When I set autoLoad to true on the store, it works. If I remove autoLoad, and add this to the view nothing happens.
List config:
{
xtype: 'list',
fullscreen: true,
disableSelection: true,
store: 'NewsStore',
itemId: 'newsList',
itemTpl: '<li><strong>{date} - {title}</strong><br/>{text}</li>',
plugins: [
{
xclass: 'Ext.ux.touch.PullRefreshFn',
pullText: 'Henter nyheter',
refreshFn: function () {
Ext.getStore('NewsStore').load();
}
}
]}
The listener on the panel will load the store:
listeners: {
painted: function () {
Ext.getStore('NewsStore').load();
}
}
I have tried to use the callback from the load method. I have tried to get the store from the list and update this, nothing works (the list is simply empty and does not display anything, even though I can see that the code is fetching the information). Any idea what I am doing wrong here?
You have to use setStore property to populate the data
var myStore = Ext.getStore('NewsStore');
Now access the list object and just
mylist.setStore(myStore);
Related
I have a page with a Kendo Grid. The read method from the dataSource calls a custom REST API which takes around 15 seconds and returns over 2,000 records.
When the user hits the "Export" button, by looking at the browser's Network tab, I see that the read method is triggered again.
Why isn't the export feature using the records that have already been loaded? I tried removing the pageSize and allPages properties but nothing has changed.
Is this Kendo's default behavior? If so, are there any workarounds so that the service is not called again?
HTML:
<div kendo-grid="grid"</div>
JS:
$scope.grid = {
dataSource: {
transport: {
read: {
url: "/...",
cache: false
}
},
schema: { ... },
pageSize: 20
},
toolbar: ["excel"],
excel: {
fileName: "xxx.xlsx",
allPages: true
}
};
When the allPages option is set to true and serverPaging is enabled,
the Grid will make a "read" request for all data. If the data items
are too many the browser may become unresponsive. Consider
implementing server-side export for such cases.
Docs
Server Side Export
I want to associate a store to split button menu. I am using extjs version 5. I have searched on the web and even went through sencha documentation but I couldn't figure out a way to achieve this.
Currently i'm holding the menu details in variable and assigning it to the splitbutton xtyoe menu property.I want to achieve the same using store, your help is much appreciated!
Program Code:-
var menuJSON = [{
text:'Menu1',
menu:[{text:'Submenu1'},{text:'Submenu2'}]
},{
text:'Menu2',
menu:[{text:'Submenu1'},{text:'Submenu2'}]
},{
text:'Menu3',
menu:[{text:'Submenu1'},{text:'Submenu2'}]
},{
text:'Menu4'
},{
text:'Menu5',
menu:[{text:'Submenu1'},{text:'Submenu2'}]
}];
{
region: 'south',
fbar: [{
xtype:'splitbutton',
id: 'app-starterMenu',
text:'Start',
scale:'small',
iconCls:'icon-start',
menuAlign: 'bl-tl',
menu: menuJSON
}]
}
Thanks in advance!
It would be helpful if you can provide example code for the store or relative controller, however this is still easier than you might think. Of course, it's nothing that comes out of the box, but it's a perfect case of using listeners.
Whenever the store changes data, you want to update your button configuration. Therefore just add the relevant listener to your store - maybe using the refresh or update event (depending on your specific use case). Then whenever the store data changes, you need to grab a reference to your button (or associated menu) and update the items. In it's most simplistic form, an example might be as follows:
store: {
listeners: {
refresh: function(store) {
// Get all the raw data from records and use it to set items on the menu
var rawData = Ext.Array.pluck(store.getRange(),'data');
Ext.getCmp('app-starterMenu').setMenu({
items: rawData
});
// *OR* Loop through the store data conditionally and include what you need
Ext.getCmp('app-starterMenu').getMenu().removeAll();
store.each(function(record){
Ext.getCmp('app-starterMenu').getMenu().add(record.getData());
});
}
}
}
I have the following example (http://jsfiddle.net/a473n/1/). The code is this:
Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());
Ext.create('Ext.form.field.Checkbox', {
stateful: true,
boxLabel: 'Click me',
stateEvents: ['change'],
stateId: 'my-checkbox',
renderTo: document.body
});
When I use Chrome's debugger to view Resources and see local storage, I can see an entry for 'my-checkbox', but when I click the button that represents the checkbox in the page UI, I don't see the value of checked or unchecked being written to local storage. The value in local storage never changes. What gives?
The state data comes from the getState method. For checkboxes, it is inherited from AbstractComponent, and it merely saves the size of the component (see the code). So you'll have to provide your own implementation of this method if your wish is to save and restore the value.
Of course, there is a second step, you'll also have to override the applyState method to apply the extra things you'll be saving.
I've updated your fiddle to demonstrate this:
Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());
Ext.create('Ext.form.field.Checkbox', {
stateful: true,
boxLabel: 'dasfasdf',
stateEvents: ['change'],
stateId: 'my-checkbox',
renderTo: Ext.getBody()
,getState: function() {
return {
checked: this.getValue()
};
}
,applyState: function(state) {
this.setValue(state && state.checked);
}
});
Voilà! Value-wise stateful checkbox!
If you want to do this with something more involved than a checkbox, it would probably be a good idea to also call the parent of the overridden methods. Check the implementations for the actual components, to see if you need it.
I want to render a view which I create when the button on another view is clicked.
Here is my controller code, and I am following the MVC architecture
Ext.define('demo.controller.LoginController' , {
extend: 'Ext.app.Controller',
config: {
refs:{
loginAction: 'button[action=login]'
},
control:{
loginAction: {
tap:'loginProcess'
}
}
},
loginProcess:function(button,e,opts){
// Render View here
}
});
I have searched and I came across getMainView().push() and Ext.ViewPoart.add() but it's not working. According to the MVC pattern how should call this view from a controller?
EDIT
code of profilecontainer
Ext.define('demo.view.ProfileContainer',{
extend:'Ext.Panel',
xtype:'profilecontainer',
requires: [
'Ext.Label'
],
config: {
items:[{
xtype:'label',
html:'hi'
}]
}
});
Both of the ways you have tried should work, if you set them up correctly.
First, getMainView().push(newView) will work if mainView is an Ext.navigation.View. See the docs for this method here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.navigation.View-method-push
You can also use Ext.Viewport.setActiveItem(newView), assuming you have no typos (your post says ViewPoart). (Ext.Viewport.add will add the panel to the Viewport, but not set it as the active Card in the layout)
If neither of these are working, then you probably are not configuring your controller correctly. If that is the case, ensure that your loginProcess method is being called. If it is not, then your selector, button[action=login], is not correct.
Sometimes we use one store for few views(list, carousel,dataviews) and when we refresh(load, filter) store data, dom of all view that use this store will be rebuild, but some views is not displayed in this time, and may be will not show with these data. How we can refresh list dom only if it displayed, not every time when it store refresh?
Issue examle
Ext.define("Test.view.Main", {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [ ]
},
constructor : function(){
this.callParent(arguments);
var store = Ext.create('Ext.data.Store',{
data :[
{title : 'One'},
{title : 'Two'},
{title : 'Three'}
]
}),
firstList = Ext.create('Ext.List',{
title : 'tab1',
store : store,
itemTpl : '{title}',
onItemDisclosure : function(){
store.add({title : 'Four'});
}
}),
secondList = Ext.create('Ext.List',{
title : 'tab2' ,
store : store,
itemTpl : '{title}'
}),
thirdList = Ext.create('Ext.List',{
title : 'tab3',
store : store,
itemTpl : '{title}'
});
this.add([
firstList,
secondList,
thirdList
]) ;
}
});
When tap on item in the first list, in store will be added new item. And dom of all list will be change although second and third list not displayed
I see one option. Create one main store and create separate stores for each views. And when view show fill it store from Main store. But it look not good. Any other ideas?
As far as I know, there is no "out-of-the-box" solution. The docs say that the refresh event is preventable, but I haven't tested that theory.
One other idea would be to look at the dataview source and override parts of it.
The starting point would probably be to look at the store event hooks that you can find there:
storeEventHooks: {
beforeload: 'onBeforeLoad',
load: 'onLoad',
refresh: 'refresh',
addrecords: 'onStoreAdd',
removerecords: 'onStoreRemove',
updaterecord: 'onStoreUpdate'
}
However it would probably be tedious work perfecting it.
On the other hand, your DOM shouldn't be refreshed for the other lists when adding a new record, it should only add a new list item to each list so disabling the addrecords event and then doing a complete refresh of the other lists when they are displayed will probably be more ineffective?