Using paging to handle a large number of combo box items

The Movies Browser panel in this recipe, uses a combo box instance to display movie titles, as seen in the following screenshot:

When the list of items is large, it helps to display the items in fixed-length pages, as shown in the following screenshot:

How to do it...

1. 1. Create the styles needed for the combo's items:

   <style type="text/css">
   .movie-item {
   font: normal 12px tahoma, arial, helvetica, sans-serif;
   line-height:150%;
   padding:5px 20px 5px 10px;
   border:1px solid #fff;
   border-bottom:1px solid #eeeeee;
   white-space: normal;
   color:#555;
   }
   .movie-item h2 {
   display: block;
   font: inherit;
   font-weight: bold;
   color:#336699;
   }
   .movie-item h2 span {
   float: right;
   font-weight: normal;
   color:#555;
   margin:0 0 5px 5px;
   width:100px;
   display: block;
   clear: none;
   }
   .panel-icon
   {
   background: url(img/folder-movie.png) 0 no-repeat !important;
   }
   </style>
   

2. 2. Create the movies data store:

   var moviesDataStore=new Ext.data.JsonStore({
   url...