Sencha 'Single tap' example

100%

Sencha 'Single tap' example

✓ Published0🌍 Public

Last edited Oct 15, 2013

Created on Oct 15, 2013

This Sencha Touch example demonstrates a full-screen list of four items that responds to a single-tap gesture. The application defines an `Ext.List` component with an inline data array containing titles like 'Item 1' through 'Item 4'. The code registers a listener for the `itemsingletap` event, which logs a random number to the console whenever a user taps an item. The configuration uses `Ext.Loader.setConfig` and the `Ext.application` launcher to initialize the Sencha UI framework.

AI-generated description

Similar vizzes

Loading thumbnail…

multi-touch for Android Processing

This example demonstrates two-finger pinch-to-zoom and panning of a nested set of square outlines on an Android device. It uses the `MultiTouchController` library, which processes `MotionEvent` data to detect drags and stretches, and the sketch maintains a world offset and scale via `translate` and `scale`. A `TouchHelper` implements the controller’s callback interface, updating the translation and scale values based on touch positions, while the `draw()` function renders the scaled geometry with Processing for Android.

RRandomEtc

51% match

Loading thumbnail…

Untitled

This example presents a mobile-style user interface for an iNaturalist data visualizer, built with the Onsen UI framework and jQuery. The interface includes a navigator with a tab bar offering five sections: Home, Time, Space, Species, and Settings. Each tab is a separate page template, with the Home page containing a file input for uploading CSV data. The JavaScript handles page initialization events and logs tab clicks through jQuery’s `$(document).ready` and `click` handlers, though the actual data visualization logic is not yet implemented.

Aarun-subba

51% match

Loading thumbnail…

Ember Starter Kit

This example demonstrates a virtual scrolling list built with the Ember framework. It renders 1,000 items but only displays a small visible subset within a fixed-height, scrollable container, using absolute positioning to place items at their correct vertical offsets. The component calculates visible indices and offsets based on the current scroll position, updating the display dynamically. The code uses Ember’s `Component`, `Route`, and `Handlebars.SafeString` APIs, along with jQuery for scroll event binding, and the data is a generated list of names.

RRandomEtc

51% match

Loading thumbnail…

Shopping App Prototype

This example demonstrates a simple shopping list interface where items and their prices appear, update, and disappear over time using animated data joins. The prototype renders text elements in an SVG canvas, with each item positioned vertically and displaying its name and price. D3 v4’s data join pattern (`selectAll`, `enter`, `exit`, `merge`) handles the dynamic updates, while timed `setTimeout` calls trigger sequential changes to the dataset. The code uses `d3.select` to target the SVG and `text` elements, with styles applied directly via `.style()` and attributes set through `.attr()`.

CCurran Kelleher

50% match

Loading thumbnail…

ReactSimple

This example demonstrates a simple interactive web app using React to track click counts on a page. It shows two buttons and a text block that display the number of times they have been clicked, with the app state managed through React’s `useState` and event handlers like `onClick` and `onContextMenu`. The code uses React 16.9 and ReactDOM to render SVG elements, and it includes a reference to a D3-loaded CSV dataset from a GitHub gist, though the dataset is not visualized in the current interaction.

SShane Carey

50% match

Loading thumbnail…

Todos

A todo list application demonstrates building interactive user interfaces with d3-component, using Redux for state management and d3 transitions for enter and exit animations. The interface supports adding, toggling, and filtering todos by visibility status. The code leverages d3-component’s render, create, and destroy lifecycle hooks, with transition calls animating list item size changes, and a key function binding data to DOM elements.

CCurran Kelleher

50% match

Loading thumbnail…

Untitled

This example demonstrates how D3 can bind data to pre-existing HTML list items and update them dynamically. The visualization shows five initial values displayed as text within `<li>` elements, with a button that triggers removal of the fourth data point. The code uses D3 v4’s selection API, including `.data()`, `.text()`, and `.exit().remove()`, all inside an HTML page with inline JavaScript. It relies on the `d3.select` and `d3.selectAll` methods to manipulate the DOM.

Ddeven1998

49% match

Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Mmbostock

49% match