Records limitation In Virtual Detail ("SHOW MORE" button)

You can use my code as an example to implement your logic:

define("UsrSchema27d9d5e6Detail", [], function() {
	return {
		entitySchemaName: "UsrTestDetail",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
                "operation": "insert",
                "name": "LoadGridButton",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.LoadGridButtonCaption"},
                    "click": {"bindTo": "onLoadGridButtonClick"},
					"enabled": {"bindTo": "isLoadGridButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			},
			{
                "operation": "insert",
                "name": "LoadNextRecords",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.LoadNextRecords"},
                    "click": {"bindTo": "onLoadNextRecordsButtonClick"},
					"enabled": {"bindTo": "isLoadNextRecordsButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			},
			{
                "operation": "insert",
                "name": "ClearGridData",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.ClearGridData"},
                    "click": {"bindTo": "onClearGridDataButtonClick"},
					"enabled": {"bindTo": "isClearGridDataButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			}
		]/**SCHEMA_DIFF*/,
		attributes: {
 
			IsGridEmpty: {
                    dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
                    value: true
			},
 
			NumberOfClicks: {
				dataValueType: this.Terrasoft.DataValueType.INTEGER,
				value: 0
			},
 
			NumberOfRecordsToDisplay: {
				dataValueType: this.Terrasoft.DataValueType.INTEGER,
				value: 10
			},
 
			CanLoadGridData: {
				dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
				value: true
			},
 
			ObjectsCollection: {
				dataValueType: this.Terrasoft.DataValueType.COLLECTION,
				value: [
					{
						UsrName: "1111",
						UsrIntColumn: 1
					},
					{
						UsrName: "Test2",
						UsrIntColumn: 24
					},
					{
						UsrName: "Test3",
						UsrIntColumn: 34
					},
					{
						UsrName: "Test4",
						UsrIntColumn: 44
					},
					{
						UsrName: "Test5",
						UsrIntColumn: 54
					},
					{
						UsrName: "Test6",
						UsrIntColumn: 64
					},
					{
						UsrName: "Test7",
						UsrIntColumn: 74
					},
					{
						UsrName: "Test8",
						UsrIntColumn: 84
					},
					{
						UsrName: "Test9",
						UsrIntColumn: 94
					},
					{
						UsrName: "Test10",
						UsrIntColumn: 104
					},
					{
						UsrName: "Test11",
						UsrIntColumn: 114
					},
					{
						UsrName: "Test12",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test13",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test14",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test15",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test16",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test17",
						UsrIntColumn: 124
					}
				]
			}
		},
		methods: {
 
			isClearGridDataButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks != 0 && !canLoadMoreData;
			},
 
			isLoadGridButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks == 0;
			},
 
			isLoadNextRecordsButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks != 0 && canLoadMoreData;
			},
 
			processObjectsCollection: function(collection, numberOfRecordsToLoad, skipRecordsNumber) {
				var newCollection = Ext.create("Terrasoft.Collection");
				Terrasoft.each(collection, function(item, key) {
					if (key < numberOfRecordsToLoad && key >= skipRecordsNumber) {
						var model = Ext.create("Terrasoft.BaseViewModel", {
						rowConfig: {
							Id: {
								columnPath: "Id",
								dataValueType: Terrasoft.DataValueType.GUID
							},
							UsrName: {
								columnPath: "UsrName",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrIntColumn: {
								columnPath: "UsrIntColumn",
								dataValueType: Terrasoft.DataValueType.INTEGER
							}
						},
						values: {
							Id: Terrasoft.generateGUID(),
							UsrName: item.UsrName,
							UsrIntColumn: item.UsrIntColumn,
						}
					}, this);
						newCollection.add(model.get("Id"), model);
					}
				});
				return newCollection;
			},
 
			processNumberOfClicks: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var numberOfRecordsToDisplay = this.get("NumberOfRecordsToDisplay");
				var numberOfRecordsToLoad = (numberOfClicks + 1) * numberOfRecordsToDisplay;
				var numberOfRecordsToSkip = numberOfClicks * numberOfRecordsToDisplay;
				this.set("NumberOfClicks", numberOfClicks + 1);
				var result = {
					NumberOfRecordsToLoad: numberOfRecordsToLoad,
					NumberOfRecordsToSkip: numberOfRecordsToSkip
				};
				return result;
			},
 
			processDataLoadRequest: function() {
				var offsetFetchValue = this.processNumberOfClicks();
				var numberOfRecordsToLoad = offsetFetchValue.NumberOfRecordsToLoad;
				var skipRecordsNumber = offsetFetchValue.NumberOfRecordsToSkip;
				var object = this.get("ObjectsCollection");
				var processedCollection = this.processObjectsCollection(object, numberOfRecordsToLoad, skipRecordsNumber);
				var processedCollectionLength = processedCollection?.length;
				var response = {
					collection: processedCollection,
					success: true,
					errorInfo: undefined
				};
				this.updateLoadedGridData(response, this.onGridDataLoaded, this);
				return processedCollectionLength != 10;
			},
 
			onClearGridDataButtonClick: function() {
				const gridData = this.getGridData();
				gridData.clear();
				this.set("NumberOfClicks", 0);
				this.set("CanLoadGridData", true);
			},
 
			onLoadGridButtonClick: function() {
				this.processDataLoadRequest();
				this.set("CanLoadMoreData", false);
			},
 
			onLoadNextRecordsButtonClick: function() {
				var result = this.processDataLoadRequest();
				if (result) {
					this.set("CanLoadGridData", false);
				}
			}
		}
	};
});

The code is simple to read, and everything should be clear. The number of records to load per LoadNextRecords button click is controlled in the NumberOfRecordsToDisplay attribute. The idea was to add 3 buttons:

1) LoadGridButton performs the initial data load. Becomes disabled once it's clicked.

2) LoadNextRecords loads the next 10 records from the ObjectsCollection attribute. It becomes disabled once all records are displayed.

3) ClearGridData performs data grid clear, and data loading can start from the beginning. It is enabled only when all records are loaded into the grid.

Oleg Drobina,

Thanks Oleg, it works.