Sencha Touch List Paging with Memory Store

Hello,

Recently I was working with Sencha Touch, Phonegap application. Where we have sqlite database as a local storage and we have number of lists where we displayed records from different tables. In some tables we were having more than 300 records and for the better performance and user experience we want to have paging in list.

Sencha list does support paging with list paging plugin. It's like you have to configure your list store with page size. So when you reach at end of the list store will be loaded again and it will again call url mentioned in your proxy and pass page number as param. But here in our case we have local database. So we were not having any ajax proxy where we can send page params and get next page data. Instead we have to write a db logic to get certain range of records. How to do that. First we extended list and added currentPage as config in it and it's initialized with 1.

Now the problem is we have to detect that user has scrolled till the end of the list so we can load next page data in list along with other data. This is the same logic used by list paging plugin. Check the following code.

'#listItemId':{

         initialize: function(list){

                var scroller = list.getScrollable().getScroller();

                scroller.on({

                        scrollend: function(scroller, x, y){

                                if (y >= scroller.maxPosition.y) {

                                       //scrolled till end.

                                       //logic to get next records from database.

                                }

                        },

                       scope: this

               });

        }

}

Above code you need to add in your contoller's this.control method. The logic is quite simple. We added scroll end listener for list scrollbar and checked it's postion. If scroller's y coordinate matches scrollbar's max postion, that means we are at end. So here we have to write our logic to get next set of data from database. 

Hope this helps you. 

Magento - Display Custom Option Quantity in Manage Product Grid

Hello,

I am back to blogging after long time. Past few months were really busy for me so did not get enough time for blogging.  So recently I was working on magento project, where we have used MageWrox Advanced Custom Option extension to have quantity and SKU for each custom option.

When you go to Catalog --> Manage Products, in grid only total qty is displayed. Our requirement was to display custom options and it's qty there. So how to do that? Here is the trick.

Copy following file

app/code/core/Mage/Adminhtml/Block/Catalog/Product/Grid.php

Now create following folder structure in side app/code/local 

Mage -->

          Adminhtml -->

                              Block -->

                                         Catalog -->

                                                       Product

And put grid.php file there. Now open grid.php file and find following code.

if (Mage::helper('catalog')->isModuleEnabled('Mage_CatalogInventory')) {

            $this->addColumn('qty',

                array(

                    'header'=> Mage::helper('catalog')->__('Qty'),

                    'width' => '100px',

                    'type'  => 'number',

                    'index' => 'qty',

            ));

        }

This is the qty column which displays total inventory quantity. We don't want this so remove it and put following code instead of it.

$this->addColumn('customqty',

            array(

                'header'=> Mage::helper('catalog')->__('Qty'),

                'width' => '200px',

                'index' => 'entity_id',

            'type' => 'text',

            'renderer' =>  'Mage_Adminhtml_Block_Catalog_Product_Renderer_CO'

        ));

Here we will use renderer to format the data we have to display. Now created Renderer folder in 

app/code/local/Mage/Adminhtml/Block/Catalog/Product/

and create co.php file there and add following code there.

class Mage_Adminhtml_Block_Catalog_Product_Renderer_CO extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract

{

public function render(Varien_Object $row)

{

$value =  $row->getData($this->getColumn()->getIndex());

$product = Mage::getModel('catalog/product');

$product->load($value);

$customOptionHTML = '';

foreach ($product->getOptions() as $opt) {

$values = $opt->getValues();

foreach($values as $v){

$customOptionHTML.=$v['default_title'].' : '.$v['customoptions_qty'].'
';

}

}

return ''.$customOptionHTML.'';

}

}

?>

Here we are using product id to get product model and it's custom options. foreach loop is used to iterate through custom options and get custom option title and qty. Here you can make any change in format if you want. 

Please note that this code is tested in magento community version 1.7.0.2

How to add Tap Event to UIImageView in XCode?

Hello,

This blog post is about adding tap event to UIImageView dynamically.

Here we can use UITapGestureRecognizer class. Checkput the following code.

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleImageTap:)];

        tap.cancelsTouchesInView = YES;

        tap.numberOfTapsRequired = 1;

Above code is to identify single tap on image. If you want to do it for double tap just increase the count by one in numberOfTapsRequired.

Now let's create our image view.

NSString *urlString = @"http://myurl.com/image.jpg";

NSURL *url = [NSURL URLWithString:urlString];

NSData *imageData = [NSData dataWithContentsOfURL:url];

UIImage *image = [UIImage imageWithData:imageData];

UIView* mainServiceView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];

UIImageView* imageView = [[UIImageView alloc] initWithImage:image];

imageView.userInteractionEnabled =TRUE;

Here note the last line imageView.userInteractionEnabled =TRUE; This is necessary else it will not respond to any gesture. Now add a gesture to image

[imagView addGestureRecognizer:tap];

Also add handleImageTap function to your view controller file.

- (void) handleImageTap:(UIGestureRecognizer *)gestureRecognizer {

    UIView* view = gestureRecognizer.view;

    //object of view which invoked this 

}

That's it now user can tap on your image.

Hope this helps you.