I have created a list in Sencha touch2. I need to add paging to it. Lets say i need 25 items to be displayed in a page and on tap of "next" button, the next 25 items has to be displayed.
I believe sencha touch 2 provides paging but am not gettin a handle on it.
My code is
cls:'inboxqueuecls',
xtype:'list',
id:'queuelist',
store:'QueueStore',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false,
clearOnPageLoad: true
}],
style:{
'border-right':'0.01px black',
'background-color':'rgba(0,140,153,0.2)'
},
itemTpl:'{queueName}'
and my store is
pageSize: 20,
autoload: false,
proxy:{
type:'memory',
reader:{
type:'xml',
record:'string',
rootProperty:'QueuesNames',
}
}
but the "page size" doesn seem to be working.
Anything am missing? Please help.
As TDEBailleul has said pageSize is an attribute of store not of the proxy.
Second, Memory proxy does not support paging. MemoryProxy has its own processing in the Store.js. Specify json or other proxy to get paged ajax call at the output. Another solution is MemoryProxy or ever from other ancestor subclassing.
Related
I have a weird bug in my application using Tabulator by #Oli Folkerd:
After refreshing the table I always end up with having 20 rows instead of my preset 25 rows:
I checked the response from my django ViewSet and the answer always contains the right amount of objects.
js Code:
var table = new Tabulator("#ptable",
{height:"100%",
layout: "fitData",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [50, 100],
ajaxURL: "api/products",
columns: cols,});
setInterval( function () {
table.setData();
}, 10000);
becomes:
I am happy to post code on the django part as well, but I do not think thats the problem here. Also interesting: When I click on a random page number in the footer I always get to see 20 items per page - except if I choose the last one.
Can any one help me through react native gifted chat? I want to share files like (.pdf, docs, .txt, .jpg.) How to do that?
You have to use renderCustomView (Function) - Custom view inside the bubble prop.
And add some meta information into your message data like this is a SPECIAL message and finally test in renderCustomView if you are in the case of a special message.
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/App.tsx#L128
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example-expo/CustomView.tsx
react-native-gifted-chat already includes support for images and videos, using the properties video and image of IMessage, just past pass the the link of the resource
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
For the rest of types you have to implement your own logic, using one of the render functions, i think you could renderMessageImage with a link to the icon of the resources and add a description, also you should handle the click event to start download
In my app I have added custom menu items to user timeline items. I am creating the custom menus in iteration. Is there any way to append the custom properties to the custom menu item? , so that I can know which menu item is clicked.
ere is my code for custom menu,
// And custom actions
List<MenuValue> menuValues = new ArrayList<MenuValue>();
menuValues.add(new MenuValue().setIconUrl(WebUtil.buildUrl(req, "/static/images/drill.png")).setDisplayName("Found"));
menuItemList.add(new MenuItem().setValues(menuValues).setId("found").setAction("CUSTOM"));
timelineItem.setMenuItems(menuItemList);
timelineItem.setNotification(new NotificationConfig().setLevel("DEFAULT"));
Thanks in advance.
You're already attaching a property to the menu item with the setId() method. The value in the id is ignored by Glass except to send it back to you when this menu item is selected. You can put anything you want here (within reason - there is a limit of a few hundred characters).
So, given your example above, if the menu item is selected, you'd get a notification looking something like this:
{
"collection": "timeline",
"itemId": "8a84302a-1da7-46f2-ac72-2c008fce2b4b",
"operation": "UPDATE",
"userToken": "12345678901234567890",
"verifyToken": "shibboleet",
"userActions": [
{
"type": "CUSTOM",
"payload": "found"
}
]
}
You would examine the userActions.payload field and take action based on this.
I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>
I have an iggrid that is using a JSON data source for the main grid data and the combo box in one of my fields.
I have created the grid and the combo and the data is there. When I change the combo value and commit the grid the main grid column value does not change. I can see this by assigning a default value to the column and then changing it via a combo box.
I am working off of this example.
http://www.infragistics.com/products/jquery/sample/combo-box/grid-editor
Combo Data
occCodeData = [
{ "ID": "0", "OccCode": "Food" },
{ "ID": "1", "OccCode": "Beverages" },
{ "ID": "2", "OccCode": "Electronics" },
{ "ID": "3", "OccCode": "Cookies" }
];
My grid data is stored in a JSON variable in javascript pulled from a web api. I have verified the data is valid using a console write.
Does anyone have this working with standard JSON, JS, and HTML? This main issue is when I change the combo value it does not update my JSON data behind the scenes. The GUI grid changes fine.
When you have editing in the grid, by default the autoCommit option is set to false (meaning the UI updates but the values are not committed to the data source). You can change this to true in order to automatically commit to the data:
//Initialize
$(".selector").igGrid({
autoCommit : true
});
//Get
var commit = $(".selector").igGrid("option", "autoCommit");
Or you can call the commit method manually:
$(".selector").igGrid("commit");
I figured it out. My Sample occCodeData data did not match my current value.
So my default value pulled from the database was 129 but my possible values were 0,1,2,3. This was causing the combo not to change the value because it did not have a match in it's own listing.