Posted by hafizan on Sun 8 Nov 01:08
report abuse | View followups from fgds | download | new post
- <?php
- /* this will be testing extjs form
- // Conseptual 2 panel. First Panel for viewing Data only.Second Panel Are for form.It will be used viewport(No choice).Direct changing html
- // are to difficult to manipulate.
- Form will be posted at ajax method and will be refresh if new crud function created
- */
- ?>
- <?php //initialize the session
- include('class/class_form.php');
- $f=new personelClass;
- // check if the any session equal to zero redirect to index.php
- $f->redirect("index.php");
- }
- include('Connections/localhost.php');
- include('class/class_navigation.php');
- include('class/class_miscellaneous.php');
- include('language/'.$_SESSION['MM_UserLanguage'].'/text.php');
- include('class/class_date.php');
- //declare object
- $d=new dateClass;
- $m=new miscellaneous;
- $ng = new navigation;
- $starttime=$m->excute_time_start(); //check the execuation time
- $q->limit = 5; // set as global class variable
- $q->offset = $_GET['offset']; // set as global class variable
- $q->page = $_SERVER['PHP_SELF']; // this filename
- $q->tablename = 'todo'; // tablename
- $q->rowid = 'todoId'; //rowid for delete
- // everything given flexibility on todo
- ?>
- <html>
- <!-- basic extjs required file -->
- <script type="text/javascript" src="js/ext-base.js"></script>
- <script type="text/javascript" src="js/ext-all.js"></script>
- <!-- UX for filtering Data -->
- <script type="text/javascript" src="js/menu/RangeMenu.js"></script>
- <script type="text/javascript" src="js/menu/ListMenu.js"></script>
- <script type="text/javascript" src="js/filter/GridFilters.js"></script>
- <script type="text/javascript" src="js/filter/Filter.js"></script>
- <script type="text/javascript" src="js/filter/StringFilter.js"></script>
- <script type="text/javascript" src="js/filter/DateFilter.js"></script>
- <script type="text/javascript" src="js/filter/ListFilter.js"></script>
- <script type="text/javascript" src="js/filter/NumericFilter.js"></script>
- <script type="text/javascript" src="js/filter/BooleanFilter.js"></script>
- <!-- end of UX for filtering data -->
- <!-- this is UX Form add on -->
- <script type="text/javascript" src="js/combobox.js"></script>
- <Script type="text/javascript" src="js/colorpicker.js"></script>
- <script type="text/javascript" src="js/datetime.js"></script>
- <script type="text/javascript" src="js/grid.js"></script>
- <script type="text/javascript" src="js/ux/Spotlight.js"></script>
- <!-- end of UX Form add on -->
- <link rel="stylesheet" type="text/css" href="css/ext-all.css">
- <link rel="stylesheet" type="text/css" href="css/icons.css">
- <link rel="stylesheet" type="text/css" href="css/Ext.ux.grid.RowActions.css">
- <link rel="stylesheet" type="text/css" href="css/empty.css" id="theme">
- <link rel="stylesheet" type="text/css" href="css/webpage.css">
- <link rel="stylesheet" type="text/css" href="css/rowactions.css">
- <style>
- .word {
- background-image: url(images/icon/page_word.png) !important;
- }
- .excel {
- background-image:url(images/icon/page_excel.png) !important;
- }
- .pdf {
- background-image:url(images/icon/page_white_acrobat.png) !important;
- }
- .printer {
- background-image:url(images/icon/printer.png) !important;
- }
- .new {
- background-image:url(images/icon/add.png) !important;
- }
- .update {
- background-image:url(images/icon/application_edit.png) !important;
- }
- .remove {
- background-image:url(images/icon/application_form_delete.png) !important;
- }
- </style>
- <!-- Some to create extjs form -->
- <script language="javascript" type="text/javascript">
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = 'images/s.gif';
- var encode = false;
- var local = false;
- var store = new Ext.data.JsonStore({
- autoDestroy : true,
- url : 'arnab.php',
- remoteSort : true,
- storeId : 'myStore',
- root : 'data',
- totalProperty : 'total',
- fields: [ { name : 'todoId' },
- { name : 'todo_cde' },
- { name : 'todo_tle' },
- { name : 'department_loc_des' },
- { name : 'asset_nme' },
- { name : 'todo_sts' },
- { name : 'date_sts',
- type : 'date',
- dateFormat : 'Y-m-d H:i:s' },
- { name : 'date_end',
- type : 'date',
- dateFormat : 'Y-m-d H:i:s' }
- ]
- });
- var filters = new Ext.ux.grid.GridFilters({
- // encode and local configuration options defined previously for easier reuse
- encode : encode, // json encode the filter query
- local : local, // defaults to false (remote filtering)
- filters: [ { phpMode : true,
- type : 'list',
- dataIndex : 'todo_cde',
- column : 'todo_cde',
- table : 'todo_cde',
- options : [
- <?php // initilize dummy value for strict setting php
- $sql = NULL;
- $row = NULL;
- $str = NULL;
- $sql = "
- SELECT *
- FROM `todo_cde`";
- $q->query_view($sql);
- while ($row = $q->fetch_array()) {
- $str.="['".$row['todo_cdeId']."','".$row['todo_cde_des']."'],";
- }
- $str.=$q->removeComa($str);
- echo $str;
- $q->free_result(); // free resouces query
- ?>]
- },{ type : 'string',
- dataIndex : 'todo_tle',
- column : 'todo_tle',
- table : 'todo'
- },{ phpMode : true,
- type : 'list',
- dataIndex : 'department_nme',
- column : 'departmentId',
- table : 'department',
- options : [
- <?php // initilize dummy value for strict setting php
- $sql = NULL;
- $row = NULL;
- $str = NULL;
- $sql = "
- SELECT *
- FROM `department`";
- $q->query_view($sql);
- while ($row = $q->fetch_array()) {
- $str.="['".$row['departmentId']."','".$row['department_nme']."'],";
- }
- $str.=$q->removeComa($str);
- echo $str;
- $q->free_result(); // free resouces query
- ?>]
- },{ phpMode : true,
- type : 'list',
- dataIndex : 'department_loc_des',
- column : 'department_locId',
- table : 'department_loc',
- options : [
- <?php // initilize dummy value for strict setting php
- $sql = NULL;
- $row = NULL;
- $str = NULL;
- $sql = "
- SELECT *
- FROM `department_loc`";
- $q->query_view($sql);
- while ($row = $q->fetch_array()) {
- $str.="['".$row['department_locId']."','".$row['department_loc_des']."'],";
- }
- $str.=$q->removeComa($str);
- echo $str;
- $q->free_result(); // free resouces query ?>]
- },{ type : 'string',
- dataIndex : 'asset_nme',
- column : 'asset_nme',
- table : 'asset'
- },{ type : 'string',
- dataIndex : 'todo_sts',
- column : 'todo_sts',
- },{ type : 'date',
- dataIndex : 'date_stt'
- },{ type : 'date',
- dataIndex : 'date_end'
- }]
- });
- this.action = new Ext.ux.grid.RowActions({
- header : 'Actions',
- dataIndex : 'todoId',
- actions : [{
- iconCls : 'update',
- callback : function(grid, record, action, row, col){
- Ext.MessageBox.alert('message','This is for update button');
- formPanel.form.load({
- url : 'arnab.php',
- method : 'POST',
- waitMsg : 'Loading...',
- params : { method :'read',mode:'update',todoId:record.data.todoId },
- success : function(form,action) {
- Ext.MessageBox.alert('Message', 'Loaded OK');
- viewPort.items.get(1).expand();
- },
- failure : function(action) {
- Ext.MessageBox.alert('Message', 'Load failed.grid');
- }
- });
- }
- },{
- iconCls : 'remove',
- callback : function(grid, record, action, row, col) {
- Ext.Msg.show({
- title : 'Delete record?',
- msg : 'Do you really want to delete </b><br/>There is no undo.',
- icon : Ext.Msg.QUESTION,
- buttons : Ext.Msg.YESNO,
- scope : this,
- fn : function(response) {
- if('yes' == response) {
- Ext.MessageBox.alert('message','nothing change');
- Ext.Ajax.request({
- url : 'arnab.php',
- params : { method:'delete',todoId:record.data.todoId },
- success : function(){
- Ext.MessageBox.alert('Message','Data have been Remove');
- store.reload();
- },
- failure : function(){
- Ext.MessageBox.alert('Message','Data failure update');
- }
- });
- }
- }
- });
- }
- }]
- });
- var columnModel = [this.action,{
- dataIndex : 'todo_cde',
- header : 'Todo Code'
- },{ dataIndex : 'todo_tle',
- header : 'Title'
- },{ dataIndex : 'department_nme',
- header : 'Department'
- }, { dataIndex : 'department_loc_des',
- header : 'Location'
- },{ dataIndex : 'asset_nme',
- header : 'Asset Name'
- },{ dataIndex : 'todo_sts',
- header : 'Status'
- },{ dataIndex : 'date_stt',
- header : 'Start',
- renderer : Ext.util.Format.dateRenderer('d-m-Y'),
- filter : { type : 'date' }
- },{ dataIndex : 'date_end',
- header : 'End',
- renderer : Ext.util.Format.dateRenderer('d-m-Y'),
- filter : { type : 'date' }
- },{ dataIndex : 'todo_clr',
- header : 'Color'
- }];
- var grid = new Ext.grid.GridPanel({
- border : false,
- store : store,
- autoHeight : 'auto',
- columns : columnModel,
- loadMask : true,
- plugins : [this.action,filters],
- sm : new Ext.grid.RowSelectionModel({singleSelect: true}),
- listeners : {
- render : {
- fn : function(){
- store.load({
- params : {
- start : 0,
- limit : 50,
- method : 'read',
- mode : 'view'
- }
- });
- }
- }
- },
- bbar : new Ext.PagingToolbar({
- store : store,
- pageSize : 50,
- plugins : [filters]
- })
- });
- var gridPanel = new Ext.Panel ({
- title:'testing grid data',
- tbar :[ { text : ' ', iconCls : ' ' },
- { text : 'New Record',
- iconCls : 'new',
- handler : function () {
- Ext.MessageBox.alert('message','you will add record');
- viewPort.items.get(1).expand();
- }
- },{ text : 'Words',
- iconCls : 'word',
- handler : function() {
- Ext.MessageBox.alert('message','will open new page contain fake words');
- }
- },{ text : 'Excel',
- iconCls : 'excel',
- handler : function() {
- Ext.MessageBox.alert('message','will open new page contain fake excel');
- }
- },{ text : 'Pdf',
- iconCls : 'pdf',
- handler : function() {
- Ext.MessageBox.alert('message','will open pdf');
- }
- }],
- items:[grid]
- });
- // viewport just save information,items will do separate
- var departmentId = new Ext.ux.form.ComboBoxMatch({
- <?php $sql = NULL;
- $result = NULL;
- $row = NULL;
- $str = NULL;
- $sql = " SELECT *
- FROM `department`
- WHERE 1 ";
- // only create store if exist data
- echo " store : [ ";
- $str.= "['".$row['departmentId']."','".$row['department_cde']." -- ".$row['department_nme']." (".$row['department_des'].") '],";
- }
- echo "],";
- } ?>
- xtype : 'combo',
- labelAlign : 'left',
- fieldLabel : 'Department',
- hiddenName : 'departmentId',
- anchor : '95%',
- emptyText : 'Please Select Department',
- typeAhead : false,
- triggerAction : 'all',
- listener : function () {
- // load information arnab.php
- },
- createValueMatcher: function(value) {
- value = String(value).replace(/\s*/g, '');
- if(Ext.isEmpty(value, false)){
- return new RegExp('^');
- }
- return new RegExp('\\b(' + value + ')', 'i');
- }
- });
- departmentId.on('select', function() {
- // recall back the store
- department_locId.enable();
- var department_loc_store = new Ext.data.Store({
- proxy : new Ext.data.HttpProxy({
- url : 'arnab.php'
- }),
- reader : department_loc_reader,
- remoteSort : false,
- baseParams : {method:'read',mode:'chained',departmentId:departmentId.getValue() }
- });
- department_locId.store=department_loc_store; //reference back store
- department_loc_store.load();
- });
- // map to array first so can reload when department is choosen,testingo
- var department_loc_reader = new Ext.data.JsonReader({ root:'data' }, [ 'value', 'text']);
- // store will be remote
- var department_locId = new Ext.ux.form.ComboBoxMatch({
- store :'',
- minChars : 0,
- valueField : 'value',
- displayField : 'text',
- xtype : 'combo',
- labelAlign : 'left',
- fieldLabel : 'Location ',
- hiddenName : 'department_locId',
- anchor : '95%',
- emptyText : 'Please Select location',
- typeAhead : false,
- triggerAction : 'all',
- });
- department_locId.disable();
- var todo_cdeId = new Ext.ux.form.ComboBoxMatch({
- <?php // predefine variable .Strict type setting
- $sql = NULL;
- $result = NULL;
- $row = NULL;
- $str = NULL;
- $sql = " SELECT *
- FROM `todo_cde`
- WHERE 1 ";
- // only create store if exist data
- echo " store : [ ";
- $str= NULL; // initilize dummy value
- $str.= "['".$row['todo_cdeId']."','".$row['todo_cde']." -- ".$row['todo_cde_des']."'],";
- }
- echo "],";
- } ?>
- xtype : 'combo',
- labelAlign : 'left',
- fieldLabel : 'Todo Code',
- name : 'todo_cdeId',
- hiddenName : 'todo_cdeId',
- anchor : '95%',
- emptyText : 'Please Select Asset',
- typeAhead : false,
- triggerAction : 'all',
- createValueMatcher: function(value) {
- value = String(value).replace(/\s*/g, '');
- if(Ext.isEmpty(value, false)){
- return new RegExp('^');
- }
- return new RegExp('\\b(' + value + ')', 'i');
- }
- });
- var todo_title = new Ext.form.TextField({
- labelAlign : 'left',
- fieldLabel : 'Todo Title',
- hiddenName : 'todo_tle',
- name : 'todo_tle',
- anchor : '95%'
- });
- var todo_date = new Ext.form.DateField({
- labelAlign : 'left',
- fieldLabel : 'Todo Date',
- hiddenName : 'todo_dte',
- name : 'todo_dte',
- format : 'd-m-Y',
- dateConfig : {
- altFormats : 'Y-m-d|Y-n-d',
- allowBlank : true
- },
- anchor : '95%'
- });
- var assetId = new Ext.ux.form.ComboBoxMatch({
- <?php $sql = NULL;
- $result = NULL;
- $row = NULL;
- $str = NULL;
- $sql = " SELECT *
- FROM `asset`
- WHERE 1 ";
- // only create store if exist data
- echo " store : [ ";
- $str.= "['".$row['assetId']."','".$row['asset_nme']."'],";
- }
- echo "],";
- } ?>
- xtype : 'combo',
- fieldLabel : 'Asset Code',
- hiddenName : 'assetId',
- name : 'assetId',
- anchor : '95%',
- emptyText : 'Please Select Asset',
- typeAhead : false,
- triggerAction : 'all',
- createValueMatcher: function(value) {
- value = String(value).replace(/\s*/g, '');
- if(Ext.isEmpty(value, false)){
- return new RegExp('^');
- }
- return new RegExp('\\b(' + value + ')', 'i');
- }
- });
- var todo_des = new Ext.form.HtmlEditor({
- title : 'Description',
- labelAlign : 'top',
- id : 'todo_des',
- name : 'todo_des',
- hideLabel : true,
- height : 200,
- anchor : '98%'
- });
- var date_start = new Ext.ux.form.DateTime({
- labelAlign : 'left',
- anchor : '95%',
- id : 'date_stt',
- name : 'date_stt',
- fieldLabel : 'Date/Time Start',
- timeFormat : 'H:i:s',
- timeConfig : {
- altFormats : 'H:i:s',
- allowBlank : true
- },
- dateFormat : 'd-m-Y',
- dateConfig : {
- altFormats : 'Y-m-d|Y-n-d',
- allowBlank : true
- }
- });
- var date_end = new Ext.ux.form.DateTime({
- labelAlign : 'left',
- anchor : '95%',
- id : 'date_end',
- name : 'date_end',
- fieldLabel :'Date/Time End',
- timeFormat :'H:i:s',
- timeConfig : {
- altFormats : 'H:i:s',
- allowBlank : true
- },
- dateFormat:'d-m-Y',
- dateConfig: {
- altFormats : 'Y-m-d|Y-n-d',
- allowBlank : true
- }
- });
- // hidden id for updated
- var todoId = new Ext.form.Hidden({ name:'todoId' });
- var formPanel = new Ext.form.FormPanel({
- url : 'arnab.php',
- params : { method:'save',todoId:todoId.value },
- method : 'post',
- frame : true,
- title : 'Todo Form Entry',
- border : false,
- bodyStyle : 'padding: 10px',
- width : 600,
- items : [{ layout : 'column',
- items : [{
- columnWidth : 0.5,
- layout : 'form',
- items : [ todo_cdeId,todo_title,todo_date,date_start]
- },{ columnWidth : 0.5,
- layout : 'form',
- items : [assetId,departmentId,department_locId,date_end]
- }]
- },todo_des],
- buttonVAlign: 'top',
- buttonAlign : 'left',
- buttons : [ { text : 'Save',
- handler : function () {
- formPanel.getForm().submit({
- waitMsg : 'Saving',
- params : { method:'save',todoId:todoId.value },
- success : function(){
- Ext.MessageBox.alert('Message','Data have been saved');
- store.reload();
- viewPort.items.get(0).expand();
- },
- failure : function(){
- Ext.MessageBox.alert('Message','Data failure update');
- }
- });
- }
- },{ text : 'Cancel',
- });
- var viewPort = new Ext.Viewport({
- id : 'viewport',
- region : 'center',
- layout : 'accordion',
- layoutConfig : {
- // layout-specific configs go here
- titleCollapse : true,
- animate : false,
- activeOnTop : true
- },
- items : [gridPanel,formPanel]
- });
- });
- </script>
- <body>
- </body>
- </html>
Submit a correction or amendment below (click here to make a fresh posting)
After submitting an amendment, you'll be able to view the differences between the old and new posts easily.