/releases/extjs/myext/pagelist.js.php

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
// Application instance for showing user-feedback messages.
//var App = new Ext.App({});
var fm = Ext.form;
var base_url = '<?php echo base64_decode($_GET['baseUrl']);?>';
var total_row = 20;
<?php 
// Lay noi dung trong thu muc dua vao mot mang

$dir = '../../application/views/front/';

$fileList = scandir($dir) or die ("Not a directory");

// In ra ten va kich thuoc tap tin

$templateList = array();
foreach ($fileList as $file) {
    if (is_file("$dir/$file") && $file != '.' && $file != '..') {
    	$file = substr($file, 0, strpos($file, '.'));
        $templateList[]=array($file,$file);
    }
}
?>
var templateList = <?php echo json_encode($templateList);?>;
<?php 
	$langList = unserialize(base64_decode($_GET['langList']));
	$langFilter = array();
	foreach($langList as $k=>$v){
		$langFilter[]=array($k,$v);
	}
	$langFilter = json_encode($langFilter);
	$langList = json_encode($langList);
?>
var langFilter = <?php echo $langFilter;?>;
var langList = <?php echo $langList;?>;
<?php 
	$actionList = unserialize(base64_decode($_GET['actionList']));
	$actionFilter = array();
	foreach($actionList as $k=>$v){
		$actionFilter[]=array($k,$v);
	}
	$actionFilter = json_encode($actionFilter);
	$actionList = json_encode($actionList);
?>
var actionList = <?php echo $actionList;?>;
var actionFilter = <?php echo $actionFilter;?>;
var proxy = new Ext.data.ScriptTagProxy({
 	api: {
        read : base_url+'admin/page_management/page_grid.html',
        create : base_url+'admin/page_management/add_page.html',
        update: base_url+'admin/page_management/add_page.html',
        destroy: base_url+'admin/page_management/delete_page.html'
    }
});
/*proxy.addListener('beforeload', function(scriptProxy,params){
	offset = params.start;
});*/
// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
    encode: true   // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.JsonStore({
    //id: 'id',
    //restful: true,     // <-- This Store is RESTful
	start : 'start',
	remoteSort: true,
    totalProperty: 'total',
    proxy: proxy,
    root: 'data',
    fields : [
              {name: 'id'},
              {name: 'title', type: 'string', allowBlank: false},
              {name: 'link_title', type: 'string'},
              {name: 'page_heading', type: 'string'},
              {name: 'description', type: 'string'},
              {name: 'url', type: 'string'},
              {name: 'action',type: 'string', allowBlank: false},
              {name: 'language',type: 'string', allowBlank: false},
              {name: 'template',type: 'string', allowBlank: false},
              {name: 'edit',type: 'string'},
              {name: 'home',type: 'bool'},
              {name: 'error',type: 'bool'}              
          ],
	  listeners: {
	      save: function(s, b, d) {
	    	  store.save();
	      }
	  },  
    writer: writer    // <-- plug a DataWriter into the store just as you would a Reader
});

// load the store immeditately
//store.load();

var filters = new Ext.ux.grid.GridFilters({
    // encode and local configuration options defined previously for easier reuse
    encode: true, // json encode the filter query
    local: true,   // defaults to false (remote filtering)
    filters: [{
        type: 'numeric',
        dataIndex: 'id'
    }, {
        type: 'string',
        dataIndex: 'title'
    }, {
        type: 'string',
        dataIndex: 'link_title'
    }, {
        type: 'string',
        dataIndex: 'page_heading'
    }, {
        type: 'string',
        dataIndex: 'description',
        disabled: true
    }, {
        type: 'string',
        dataIndex: 'url'
    }, {
        type: 'list',
        dataIndex: 'action',
        options: actionFilter,
        phpMode: true
    }, {
        type: 'list',
        dataIndex: 'language',
        options: langFilter,
        phpMode: true
    }, {
        type: 'list',
        dataIndex: 'template',
        options: templateList,
        phpMode: true
    }, {
        type: 'string',
        dataIndex: 'edit',
        disabled: true
    }, {
        type: 'boolean',
        dataIndex: 'home'
    }, {
        type: 'boolean',
        dataIndex: 'error'
    }]
});
var createColModel = function (finish, start) {

    var columns = [{header: "ID", 
                	width: 30, 
                	sortable: true,
                	sort: 'id', 
                	dataIndex: 'id'
                },{
                	header: "Title", 
                	//width: 100, 
                	sortable: true, 
                	sort: 'title',
                	dataIndex: 'title', 
                	editor: new Ext.form.TextField({})
                },{
                	header: "Link Title", 
                	//width: 100, 
                	sortable: true, 
                	sort: 'link_title',
                	dataIndex: 'link_title', 
                	editor: new Ext.form.TextField({})
                },{
                	header: "Page Heading", 
                	//width: 100, 
                	sortable: true, 
                	sort: 'page_heading',
                	dataIndex: 'page_heading', 
                	editor: new Ext.form.TextField({})
                },{
                	header: "Description", 
                	//width: 100, 
                	sortable: false, 
                	dataIndex: 'description', 
                	editor: new Ext.form.TextArea()
                },{
                	header: "Url", 
                	//width: 100, 
                	sortable: true, 
                	sort: 'url',
                	dataIndex: 'url', 
                	editor: new Ext.form.TextField({})
                },{
                	header: "Action",
                	renderer: formatAction, 
                	//width: 50, 
                	sortable: true,
                	dataIndex: 'action', 
                	editor: new fm.ComboBox({
                	   editable: false,
                       typeAhead: true,
                       triggerAction: 'all',                       
                       lazyRender:true,
					   mode: 'local',
					   store: new Ext.data.ArrayStore({
					       id: 0,
					       fields: [
					           'value',
					           'displayText'
					       ],
					       data: actionFilter
					   }),
					   valueField: 'value',
					   displayField: 'displayText',
					   listClass: 'x-combo-list-small'
                   })
               },{
                	header: "Language",
                	renderer: formatLanguage, 
                	//width: 50, 
                	sortable: true,
                	dataIndex: 'language', 
                	editor: new fm.ComboBox({
                	   editable: false,
                       typeAhead: true,
                       triggerAction: 'all',                       
                       lazyRender:true,
					   mode: 'local',
					   store: new Ext.data.ArrayStore({
					       id: 0,
					       fields: [
					           'value',
					           'displayText'
					       ],
					       data: langFilter
					   }),
					   valueField: 'value',
					   displayField: 'displayText',
					   listClass: 'x-combo-list-small'
                   })
               },{
                	header: "Template", 
                	//width: 50, 
                	sortable: true,
                	dataIndex: 'template', 
                	editor: new fm.ComboBox({
                	   editable: false,
                       typeAhead: true,
                       triggerAction: 'all',                       
                       lazyRender:true,
					   mode: 'local',
					   store: new Ext.data.ArrayStore({
					       id: 0,
					       fields: [
					           'value',
					           'displayText'
					       ],
					       data: templateList
					   }),
					   valueField: 'value',
					   displayField: 'displayText',
					   listClass: 'x-combo-list-small'
                   })
               },{
                	header: "Edit", 
                	width: 20, 
                	sortable: true,
                	sort: 'id',
                	dataIndex: 'edit'
                },{
                	xtype: 'checkcolumn',
                    header: 'Home',
                    dataIndex: 'home',
                    width: 20
                },{
                	xtype: 'checkcolumn',
                    header: 'Error',
                    dataIndex: 'error',
                    width: 20
                }
               ];

    return new Ext.grid.ColumnModel({
        columns: columns.slice(start || 0, finish),
        defaults: {
            sortable: true
        }
    });
};

Ext.onReady(function() {
    Ext.QuickTips.init();

    // use RowEditor for editing
    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });
    // Create a typical GridPanel with RowEditor plugin
    var pageGrid = new Ext.grid.GridPanel({
        renderTo: 'page-grid',
        iconCls: 'icon-grid',
        frame: true,        
        height: 300,
        store: store,
        plugins: [editor,filters],
        colModel: createColModel(12),
        listeners: {
            render: {
                fn: function(){
                    store.load({
                        params: {
                            start: 0,
                            limit: total_row
                        }
                    });
                }
            }
        },
        tbar: [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: onAdd
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: onDelete
        }, '-'],
        bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: total_row,
            plugins: [filters]
        }),
        viewConfig: {
            forceFit: true
        }

    });
    /**
     * onAdd
     */
    function onAdd(btn, ev) {
        var u = new pageGrid.store.recordType({});
        editor.stopEditing();
        pageGrid.store.insert(0, u);
        editor.startEditing(0);
    }
    /**
     * onDelete
     */
    function onDelete() {
        var recs = pageGrid.getSelectionModel().getSelections() ;
        if (!recs) {
            return false;
        }
        for(var i in recs)
        {
            pageGrid.store.remove(recs[i]);
        }
    }
    //store.on();

});
function formatAction(value){	
	if(value!='')
		return eval('actionList.'+value);
	else return '';
}
function formatLanguage(value){	
	if(value!='')
		return eval('langList.'+value);
	else return '';
}