Any one knows how to refresh a nested list?
I am creating a list. On tap of an item it loads a nested list. if i traverse in a nested list and then tap to another item and come back to the prev item, its still stuck in the place where it was last left.
I tried using
Ext.getCmp('nestedList').refresh();
but thet doesn seem to work.
Below is my code for the nested list panel.
Ext.define("InfoImage.view.nestedList", {
extend:'Ext.NestedList',
xtype:'nestedList',
id:'nestedList',
config:{
fullscreen:'true',
title:'Work Items Task 1',
// ui:'normal',
xtype:'nestedList',
displayField : 'text',
store:'nestedListStore',
style: {
'background-color': 'rgba(0,140,153,0.1)'
}
}
});
and the code for loading the nested list is:
showListDetail : function(view, index, item, record) {
var rec = view.getStore().getAt(index);
// Ext.getStore('workItemStore').add({Task: '7'
// },{Server: 'mobcomp1'});
if (index == 0) {
this.getDocPanel().animateActiveItem(
this.getNestedPanel(), {
type : 'slide',
direction : 'up',
duration : 250
});
Ext.getCmp('nestedList').reload();
}
Any help is appreciated.
Thanks in advance.
You can't directly refresh a nestedlist. There's no refresh() or reload() method for it.
All you need to do is load the store which is used for your nestedlist using it's configured proxy.
this.store.setProxy({
// proxy configurations ...
// ......
// ......
});
this.store.load();
Related
I'm using ckEditor 5.
My aim is to create a simple search functionality to perform some ajax calls, allow the user to select from a result list and act accordingly (inserting link, or image, or media...).
The problem is that I want to dynamically update the plugin view. Something similar to this: https://github.com/ckeditor/ckeditor5/issues/520, but I'm using a dropdown in the toolbar (I started from the EmbedMedia plugin and didn't care too much about design for now).
I asked the same question on their git (https://github.com/ckeditor/ckeditor5/issues/1681)
My template is like:
this.setTemplate( {
tag: 'form',
attributes: {
class: [
'ck',
'ck-results-form'
],
tabindex: '-1'
},
children: [
this.searchInputView,
this.searchButtonView,
{
tag: 'div',
attributes: {
class: [ 'ck-result-grid' ]
},
children: this.items
},
this.saveButtonView,
this.cancelButtonView,
]
} );
// updateList method is like this:
updateList( valuesArray ) {
console.log(this.items);
this.items = new Array();
console.log(this.items);
for (let i = 0; i < valuesArray.length && i < 20; i++) {
const urlView = new TableSizeGridBoxView(i, valuesArray[i]);
urlView.on('select-url', () => {
this._selectedUrl = valuesArray[i];
});
this.items.push( urlView );
}
console.log(this.items);
//do something here to force refresh or render the section
}
I'm able to get
My expected result, after the search, is to get
and finally select the result.
Currently I can see the object correctly initialized and updated by doing console.log, but the view doesn't update... it stays blank as in the first image (that's why I think there must be something I should be able to put where I wrote //do something here to force refresh or render the section).
Furtermore I can tell that TableSizeGridBoxView is working properly because I'm able to display arbitrary values if I call the for loop in the initialization of the view.
I have a card layout, Inside card there are many panels inside card items.
I want some listener which will be fired as soon as panel inside card layout is visually activated.
i was trying to achieve the same with Activate and show event,but i am not getting desired output.
One approach would be to write a controller that references all the views, if you are using the MVC pattern:
Ext.define('MyApplication.controller.PanelsController', {
extend : 'Ext.app.Controller',
itemId : 'panelsController',
views : [
'Panel1',
'Panel2' // etc...
],
init : function (application) {
this.control(
{
'panel#panel1' : {
show : this.myListener
}
});
},
myListener : function () {
// do stuff here.
}
});
I have a grid within a window. The grid has 3 Actions: Edit, Delete and Disable.I was wondering if it is possible to make the text of the Disable Action (which is currently 'Disable/Enable') to be dependent on the Current Status of the record selected. So say the user selects a record whose Current Status is Enabled, then the action's text should be 'Disable'. If, however, the user selects a record whose status is Disabled, then the action's text should be 'Enable'. Is it possible to do this when using Action? Or do I need to use a button instead of Action?
I am assuming your action button is in a toolbar that is docked to the top of your grid panel. The only tricky thing is getting a reference to the grid (without hardcoding it). The grid's 'select' event only gives you a reference to the rowmodel used.
/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something',
itemId: 'myAction',
action: 'myAction' // I don't like itemId's personally :)
});
/* In the Controller */
init: function() {
this.control({
'mygrid': {
select: this.onRecordSelect
}
});
},
onRecordSelect: function(rowModel, record) {
var grid = rowModel.views[0].ownerCt);
var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
var enabled = (record.get('CurrentStatus') == "Enabled");
action.setText(enabled ? 'Disable' : 'Enable');
action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}
/* in SASS */
.myDisableCls{
background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}
Good luck!
I solved the problem in another way. This is my code:
grid.getSelectionModel().on({
selectionchange: function(sm, selections) {
if (selections.length > 0) {
Edit.enable();
Delete.enable();
if(selections[0].data.CurrentStatus == "Disabled"){
Disable.setText("Enable");
Disable.enable();
}else{
Disable.setText("Disable");
Disable.enable();
}
} else {
Edit.disable();
Delete.disable();
Disable.disable();
}
}
});
I have a TabPanel with a Tabbar and four panels inside. I want to load the HTML content for the fourth panel with an AJAX call when the panel becomes visible.
The AJAX function fetches the data from the server and places it inside the panel, which uses the panel update function. The problem is how to call this function when the panel becomes visible. A simplified version is:
Pages.Contact = new Ext.Panel({
title: 'Contact',
html: 'test data',
iconCls: 'user',
cls: 'cHome',
activate: function () {
Pages.Contact.update("my ajax data");
}
});
When I go to my panel the body content is not affected. Does anyone know what goes wrong here? I've already tried to replace activate with render and show.
To add event's listeners you need to do
listeners: {
activate: function(){
console.log('activate fired');
}
},
But that's not the event you want to listen. It's better to listen for beforecardswitch on the TapPanel object, example:
listeners: {
beforecardswitch:function(newCard, oldCard, index, anim){
if(index == 3){
//loadJson and update card.
// you may want to use this also
newCard.setLoading(true);
//and after the json request has finished set it to false.
}
}
},
The solution was to use:
beforecardswitch:function(object, newCard, oldCard, index, anim) {
As shown by Ilya139 by with the object parameter as first parameter.
Then the index variable returns the correct cardnumber.
hi can anyone tell ho to selct a field in a store
i made a nestedlist and i want when someone clicks on a leaf the message somes oops, you click on a leaf. and leaf is a boolean field.
this is what i have:
new Ext.NestedList({
title: 'Categorieën',
store: NestedListDemo.Groepen_Store,
flex: 1,
listeners:
{
itemtap: function(item)
{
if (leaf==true)
{
Ext.Msg.alert('Oops', 'leaf clicked', Ext.emptyFn);
}
}
}
}),
but i have no idea how to do that with sencha touch.
I'm a little confused about where this leaf property exists. If you take a look at the documents for the NestedList, you will see that there is both an itemtap and a leafitemtap event that the list will fire. My recommendation would be to use the leafitemtap to only get events on the items which are leafs.
So if you alter your code using that function:
listeners:{
leafitemtap: function(sublist, index, element, event, card){
Ext.Msg.alert('Oops', 'leaf clicked', Ext.emptyFn);
//find the item
var item = sublist.store.getAt(index);
//then you can do something with the item
//item.get('leaf')
//sublist.store.remove(item)
}
}