Ir para conteúdo


Foto

Formulários Simples


  • Por favor, faça o login para responder
Não há respostas para este tópico

#1 beginner

beginner

    Member Avançado

  • Membros
  • PipPipPip
  • 46 posts
  • LocationPortugal - Braga

Postado 31 August 2009 - 11:43

Oi pessoal,

Baseado na minha pouca experiêcia em ExtJs venho aqui postar um exemplo muito simples de como construir um formulário,

conforme a imagem pois nem sempre é preciso criar grids.

Imagem Postada

Para começar vc deve criar uma tabela no seu B.D. uma tabela com dois campos um VarChar(10) e outro Inteiro(1).

Eu chamei os campos de 'anolectivo' e 'aberto' não vou discutir se está certo ou não pois isto é só um exemplo.

Primeiro criei um arquivo chamado de rodrigo.js que contém os Override precisos ao funcionamento do programa.

Este script deve ser colocado logo de seguido o chamado ext-all.js por exemplo:

    <script src="../ext-all.js"></script>
    <script src="rodrigo.js"></script>

Para mais informação consultar: http://extjs.com.br/...pic,1975.0.html

Arquivo rodrigo.js

Ext.override(Ext.data.Record,{
	inserted: false
});

Ext.override(Ext.PagingToolbar, {
	bind: Ext.PagingToolbar.prototype.bind.createSequence(function(store){
		store.paging = true;
		store.pageSize = this.pageSize;
		Ext.apply(store.paramNames, this.paramNames);
	}),
	unbind : Ext.PagingToolbar.prototype.unbind.createSequence(function(store){
		store.paging = false;
	})
});

Ext.override(Ext.data.Store, {
	sortById: false,
	defaultSortDir: 'ASC',
	recNo:-1,
	isBOF:function(){
		return this.recNo == 0;
	},
	isEOF:function(){
		return this.recNo == this.data.length-1;
	},
	getRecNo:function(){
		return this.recNo;
	},
	setRecNo:function(recNo){
		if ((recNo>=0)&&(recNo<this.data.length)){
			this.recNo = recNo;
			this.fireEvent('scroll', this, this.getRecNo());
			return true;
		}else{
			return false;
		}
	},
	first:function(){
		if (!this.isBOF()){
			this.setRecNo(0);
		}
	},
	last:function(){
		if (!this.isEOF()){
			this.setRecNo(this.data.length-1);
		}
	},
	next:function(){
		if (!this.isEOF()){
			this.setRecNo(this.getRecNo()+1);
			return true;
		}else{
			return false;
		}
	},
	prior:function(){
		if (!this.isBOF()){
			this.setRecNo(this.getRecNo()-1);
			return true;
		}else{
			return false;
		}
	},
	paging: false,
	pageSize: 50,
	getRecord:function(){
		return this.getAt(this.getRecNo());
	},
	loadRecords:Ext.data.Store.prototype.loadRecords.createSequence(function() {
		this.setRecNo(0);
	}),
	constructor:Ext.data.Store.prototype.constructor.createSequence(function() {
		this.addEvents('scroll');
		if(this.sortById){
			this.setDefaultSort(this.id, this.defaultSortDir);
		}
	}),
	insert: function(index, records){
		records = [].concat(records);
		for(var i = 0, len = records.length; i < len; i++){
			records[i].inserted = true;
			this.data.insert(index, records[i]);
			records[i].join(this);
		}
		this.fireEvent("add", this, records, index);
	},
	add: function(records){
		records = [].concat(records);
		if(records.length < 1){
			return;
		}
		for(var i = 0, len = records.length; i < len; i++){
			records[i].inserted = true;
			records[i].join(this);
		}
		var index = this.data.length;
		this.data.addAll(records);
		if(this.snapshot){
			this.snapshot.addAll(records);
		}
		this.fireEvent("add", this, records, index);
	},
	getChanges:function(){
		var mod = [];
		Ext.each(this.getModifiedRecords(), function(e){
			mod.push(e.data);
			mod[mod.length-1].internalInserted=e.inserted
		});
		return mod
	},
	insertRecord:function(record,index){
		index = index || 0;
		record = record || {};
		this.insert(index, new this.recordType(record))
		this.setRecNo(index);
		this.modified.push(this.getRecord());
	},
	commitChanges: function(){
		var m = this.modified.slice(0);
		this.modified = [];
		for(var i = 0, len = m.length; i < len; i++){
			m[i].commit();
			m[i].inserted = false;
		}
		this.fireEvent('scroll', this, this.getRecNo());
	},
	rejectChanges: function(){
		var m = this.modified.slice(0);
		this.modified = [];
		for(var i = 0, len = m.length; i < len; i++){
			if (m[i].inserted){
				this.remove(m[i]);
			}
			m[i].reject();
		}
	},
	locate: function(property, value, start, anyMatch, caseSensitive){
		return this.setRecNo(this.find(property, value, start, anyMatch, caseSensitive));
	},
	createFilterFn: function(property, value, anyMatch, caseSensitive){
		if(Ext.isEmpty(value, false)){
			return false;
		}
		value = [].concat(value);
		property = [].concat(property);
		if(value.length < property.length){
			return false;
		}
		var store = this;
		return function(r){
			var result = true;
			Ext.each(property, function(p,i){
				result = result && store.data.createValueMatcher(value[i], anyMatch, caseSensitive).test(r.data[p]);
			})
			return result;
		};
	},
	storeOptions: function(options){
		options = options || {};
		options.params = options.params || {};
		if(this.paging){
			var pn = this.paramNames;
			options.params[pn.limit] = options.params[pn.limit] || this.pageSize;
			options.params[pn.start] = options.params[pn.start] || 0;
		}
        delete options.callback;
        delete options.scope;
		this.lastOptions = options;
	}
});

Ext.override(Ext.form.FormPanel, {
	initComponent:Ext.form.FormPanel.prototype.initComponent.createSequence(function() {
		if(this.store){
			this.store.on('scroll', function(Store, RecNo){
				this.form.loadRecord(this.store.getRecord());
			},this)
		}
	}),
	initFields:Ext.form.FormPanel.prototype.initFields.createSequence(function(ct, c) {
		if(this.store){
			this.form.items.each(function(f){
				f.on('change', function(Field, New, Old){
					this.store.getRecord().set(Field.name, New);
					Field.focus();
				},this)
				f.on('specialkey', function(Field, e){
					if (e.getKey() == e.RETURN){
						var FField = this.form.items.itemAt(this.form.items.indexOf(Field)+1)
						if (FField){
							FField.focus(true);
						}
					}
				},this)
			},this)
		}
	}),
	onAdd: function(ct, c) {
		if (c.isFormField) {
			this.form.add(c);
		}
		if((c.items)&&(c.items.items)){
			Ext.each(c.items.items,function(item){
					this.onAdd(ct,item)
			},this)
		}
	},
	onRemove: function(c) {
		if (c.isFormField) {
			Ext.destroy(c.container.up('.x-form-item'));
			this.form.remove(c);
		}
		if((c.items)&&(c.items.items)){
			Ext.each(c.items.items,function(item){
					this.onRemove(item)
			},this)
		}
	}
});

o programa principal:

var insere = 0;

Ext.onReady(function(){

    Ext.QuickTips.init();

	var ds = new Ext.data.JsonStore({
        url: 'lerano.php',
        root: 'data',
        totalProperty: 'tot',
        fields: [
            {name: 'anolectivo', type:'string'},
            {name: 'aberto', type: 'boolean'}
        ],
       	listeners:{
		            scroll: function(){
                            insere = 0;
				            novob.enable();
				            apagarb.enable();
			               }
                  }
    }); 

    var alTxFd = new Ext.form.TextField({
    	x: 180,
        y: 20,
        name: 'anolectivo',
        allowBlank: false
    });
    
    var aChk = new Ext.form.Checkbox({
   	    x: 180,
        y: 50,
        boxLabel: '',
        name: 'aberto'
    });
    
    var novob = new Ext.Button({
			text: 'Novo   ',
			iconCls: 'icon-plus',
			handler:function(){
			      insere = 1;
				  alTxFd.setValue('');
				  aChk.setValue(false);
				  novob.disable();
				  apagarb.disable();
			}
	});

	var apagarb = new Ext.Button({
            text: 'Apagar ',
            iconCls:'icon-minus',
            handler:function(){
            	  Ext.Msg.show({
					  title: 'Apagar um registo', 
					  buttons: Ext.MessageBox.YESNO,
					  msg: 'Confirma que deseja apagar o registo ?',
					  fn: function(btn){
					  	    if (btn == 'yes'){
								deleteAno();
							}
                      }
			      });
			}
    });

    // Função que apaga um registo na B.D.
    function deleteAno(){
   	   var chave = alTxFd.getValue();
   	   
       Ext.Ajax.request({  
          waitMsg: 'P.f. espere...',
          url: 'g_ano.php',
          params: { 
               task: "DELETE", 
               id: chave
          },
          success: function(response){
               var result=eval(response.responseText);
               switch(result){
               case 1:  // Success : simply reload
                    ds.load();
                    break;
               default:
                   Ext.MessageBox.alert('Aviso',result);
                   break;
              }
          },
          failure: function(response){
              var result=response.responseText;
              Ext.MessageBox.alert('Erro',result);      
          }
       });
    };
    
    // Função que apaga um registo na B.D.
    function gravarAno(){
   	   var cha = alTxFd.getValue();
   	   var aux = aChk.getValue();
   	   var axu = ptb.cursor;
   	   
       Ext.Ajax.request({  
          waitMsg: 'P.f. espere...',
          url: 'g_ano.php',
          params: {
               task: "CREATE", 
               id: cha,
               abr: aux,
               iu: insere,
			   nid: axu 
          },
          success: function(response){
               var result=eval(response.responseText);
               switch(result){
               case 1:  // Success : simply reload
                    ds.load();
				    novob.disable();
				    apagarb.disable();
				    insere = 0;
                    break;
               default:
                   Ext.MessageBox.alert('Aviso',result);
                   break;
              }
          },
          failure: function(response){
              var result=response.responseText;
              Ext.MessageBox.alert('Erro',result);      
          }
       });
    };

    var gravarb = new Ext.Button({
            text: 'Gravar ',
            iconCls: 'icon-save-table',
            handler:function(){
                         gravarAno();
			}
    });
    
    var sairb = new Ext.Button({
  	        text:'Sair     ',
            iconCls:'icon-out',
            handler:function(){
              	  var redirect = 'menugeral.php';
  	              window.location = redirect;
            }
    });

    var ptb = new Ext.PagingToolbar({
            store: ds,
            paramNames: {start: 'start'},
            pageSize: 1,
            displayInfo: true,
            displayMsg: 'Registo {0} de {2}',
            emptyMsg: "Não existem registos para mostrar"
    });

    var simple = new Ext.FormPanel({
        frame: true,
        border: false,
        store: ds,
        bodyBorder: false,
        renderTo: document.body,
        labelWidth:80,
        autoScroll:true,
        layout: 'absolute',
        items: [{
        	       x: 90,
        	       y: 20,
				   xtype: 'label',
				   html: '<font size=3>Ano Lectivo</font>'
		        },{
		           x: 90,
        	       y: 50,
				   xtype: 'label',
				   html: '<font size=3>Activo</font>'
		        }, 
				alTxFd, 
				aChk
		       ],
		       
		bbar: ptb,
		
        buttons: [ novob,
                   apagarb,
                   gravarb,
                   sairb
                 ],

		listeners:{
			render:function(){
				ds.load();
			}
		}
    });

    var winano = new Ext.Window({
        layout:'fit',
        width:420,
        height:210,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        title: 'Anos Lectivos',
        items: [simple]
	});

	winano.show();
});

Carregamento da tabela:

<?php
  // Inclui a função de ligação e execução do SQL
  include("conect.php");
  $ac = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
  if(!$ac) $ac = 0;
  // Definição da variável que contém o comando SQL
  $procura = "SELECT COUNT(*) AS total FROM ano;";
  // Chama a função que acede á B.D. e executa o comando sql
  if( ligar($procura)){
    // Verifica se existe registos
    $obj = mysqli_fetch_assoc($procura);
    $nrec = $obj['total'];
    If ($nrec > 0) {
      // Definição da variável que contém o comando SQL
      $procura = "SELECT * FROM ano LIMIT ".$ac.", 1;";
      ligar($procura);
   	  // lê só um registo
      $obj = mysqli_fetch_assoc($procura);
      // Envia via JSON os registos para o cliente
      echo '{data:['.json_encode($obj).'], tot:'.$nrec.'}';
    } else {
      echo "{success: false, errors: { reason: 'Erro: Não existe registos!' }}";	
    }
  }
?>

E por fim o actualizador da tabela:

<?php
// The ext grid script will send  a task field which will specify what it wants to do
$task = 'LISTING';
if (isset($_POST['task'])){
	$task = $_POST['task'];
}

// Inclui a função de ligação e execução do SQL
include("conect.php");

switch($task){
    case "CREATE":
        criar();
        break;
    case "DELETE":
        apagar();
        break;
    default:
        echo "{false, 'Problema com os parâmetros!'}";
        break;
}

function criar() 
{
   $xid = $_POST['id'];
   $xabr = $_POST['abr'];
   $sn = $_POST['iu'];
   $xyz = $_POST['nid'];
   $ns = 0;

   if($sn) {
   	  $procura = "INSERT INTO `tempos lectivos`.`ano` (`anolectivo`, `aberto`) VALUES ('".$xid."', ".$xabr.");";
   	  $ns = 1;
   } else {
   	  $procura = "SELECT anolectivo FROM ano LIMIT ".$xyz.", 1";
   	  ligar($procura);
      $num = mysqli_num_rows($procura); 
      If ($num > 0) {
   	  	  $obj = mysqli_fetch_assoc($procura);
   	   	  $procura = "UPDATE ano SET anolectivo ='".$xid."', aberto =".$xabr." WHERE anolectivo ='".$obj['anolectivo']."';";
   	   	  $ns = 1;
      } else {
      	  echo "{false, 'Problema com o número do registo!'}";
      }
   }   
   if($ns){
      if( ligar($procura)){
      	  if($sn){
      	     $procura = "ALTER TABLE ano ORDER BY anolectivo";
      	     ligar($procura);
      	  }   
          echo '1';
      } else {
          echo "{false,'Não consegui ligar à tabela !'}";
      }
   }	
}

function apagar() 
{
   $xid = $_POST['id'];
   
   // Carrega o SQL	
   $procura = "SELECT * FROM `tempos lectivos`.`ano` WHERE (`ano`.`anolectivo`='".$xid."');";
   // Chama a função que acede á B.D. e executa o comando sql
   if( ligar($procura)){
       $obj = mysqli_fetch_assoc($procura);
       if($obj['aberto']) {
   	       echo "{false,'Não é possível apagar um registo activo !'}";
       } else {
           $procura = "DELETE FROM `tempos lectivos`.`ano` WHERE (`ano`.`anolectivo`='".$xid."');";
           if( ligar($procura)){
                 echo '1';
           } else {
                echo "{false,'Não consegui apagar o registo...!'}";
           }
       }
   } else {
   	   echo "{false,'Não consegui ligar à tabela !'}";
   }
}
?>

Eu não coloquei o código de certas funções porque variam o tipo e a forma de ligação ao B.D.

Galera espero ter ajudado.
Um abraço.




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos