Page 11 of 60 FirstFirst ... 91011121321 ... LastLast
Results 101 to 110 of 591

Thread: Grid RecordForm Plugin

  1. #101
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    Cannot say anything before I see it. Do you have a showcase? ... must be some stupid simple thing...
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  2. #102
    Sencha User
    Join Date
    Nov 2007
    Posts
    52
    Vote Rating
    0
      0  

    Default

    Hello

    have Problems with using 2 grids with forms in one tab panel item:

    this is my test code:
    as no paste: http://nopaste.php-quake.net/26357
    and here:
    Code:
    grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
     	url:'/admin/account/?config=2'
     	,id: 'accountv'
    	,objName:'account'
    	,idName:'id'
    ,frame: true
    ,autoHeight: true
    	,initComponent:function() {
    		this.recordForm = new Ext.ux.grid.RecordForm({
    			 title:'Account'
    			,id:'accountform'
    			,iconCls:'icon-edit-record'
    			,columnCount:1
    			,ignoreFields:{id:true}
    			,formConfig:{
    				 labelWidth:80
    				,buttonAlign:'right'
    				,bodyStyle:'padding-top:10px'
    			}
    		});
    
    		// create row actions
    		this.rowActions = new Ext.ux.grid.RowActions({
    			 actions:[{
    				 iconCls:'icon-minus'
    				,qtip:'Delete Record'
    			},{
    				 iconCls:'icon-edit-record'
    				,qtip:'Edit Record'
    			}]
    			,widthIntercept:Ext.isSafari ? 4 : 2
    			,id:'actionsaccount'
    		});
    		this.rowActions.on('action', this.onRowAction, this);
    
    		Ext.apply(this, {
    			// {{{
    			store:new Ext.data.Store({
    				reader:new Ext.data.JsonReader({
    					 id:'id'
    					,totalProperty:'totalCount'
    					,root:'rows'
    					,fields:[
    						 {name:'id', type:'int'}
    						,{name:'company', type:'string'}
    						
    					]
    				})
    				,proxy:new Ext.data.HttpProxy({url:this.url})
    				,baseParams:{cmd:'getData', objName:this.objName}
    				,sortInfo:{field:'company', direction:'ASC'}
    				,remoteSort:true
    			})
    			// }}}
    			// {{{
    			,columns:[{
    				 header:'Name'
    				,id:'company'
    				,dataIndex:'company'
    				,width:160
    				,sortable:true
    				,editor:new Ext.form.TextField({
    					allowBlank:false
    				})
    			}, this.rowActions]
    			// }}}
    			,plugins:[new Ext.ux.grid.Search({
    				iconCls:'icon-zoom'
    				,readonlyIndexes:['note']
    				,disableIndexes:['pctChange']
    			}), this.rowActions, this.recordForm]
    			,viewConfig:{forceFit:true}
    			,buttons:[{
    				 text:'Save'
    				,iconCls:'icon-disk'
    				,scope:this
    				,handler:this.commitChanges
    			},{
    				 text:'Reset'
    				,iconCls:'icon-undo'
    				,scope:this
    				,handler:function() {
    					this.store.rejectChanges();
    				}
    			}]
    			,tbar:[{
    				 text:'Add Record'
    				,iconCls:'icon-plus'
    				,listeners:{
    					click:{scope:this, fn:this.addRecord,buffer:200}
    				}
    			},{
    				 text:'Add Record'
    				,iconCls:'icon-form-add'
    				,listeners:{
    					click:{scope:this, buffer:200, fn:function(btn) {
    						this.recordForm.show(this.addRecord(), btn.getEl());
    					}}
    				}
    			}]
    		}); // eo apply
    
    		this.bbar = new Ext.PagingToolbar({
    			 store:this.store
    			,displayInfo:true
    			,pageSize:10
    		});
    
    		// call parent
    		grid1.superclass.initComponent.apply(this, arguments);
    	} // eo function initComponent
    	// {{{
    	,onRender:function() {
    		// call parent
    		grid1.superclass.onRender.apply(this, arguments);
    
    		// load store
    		this.store.load({params:{start:0,limit:10}});
    
    	} // eo function onRender
    	// }}}
    
    	,addRecord:function() {
    		var store = this.store;
    		if(store.recordType) {
    			var rec = new store.recordType({newRecord:true});
    			rec.fields.each(function(f) {
    				rec.data[f.name] = f.defaultValue || null;
    			});
    			rec.commit();
    			store.add(rec);
    			return rec;
    		}
    		return false;
    	} // eo function addRecord
    
    	,onRowAction:function(grid, record, action, row, col) {
    		switch(action) {
    			case 'icon-minus':
    				this.deleteRecord(record);
    			break;
    
    			case 'icon-edit-record':
    				this.recordForm.show(record, grid.getView().getCell(row, col));
    			break;
    		}
    	} // eo onRowAction
    
    	,commitChanges:function() {
    		var records = this.store.getModifiedRecords();
    		if(!records.length) {
    			return;
    		}
    		var data = [];
    		Ext.each(records, function(r, i) {
    			var o = r.getChanges();
    			if(r.data.newRecord) {
    				o.newRecord = true;
    			}
    			o[this.idName] = r.get(this.idName);
    			data.push(o);
    		}, this);
    		var o = {
    			 url:this.url
    			,method:'post'
    			,callback:this.requestCallback
    			,scope:this
    			,params:{
    				 cmd:'saveData'
    				,objName:this.objName
    				,data:Ext.encode(data)
    			}
    		};
    		Ext.Ajax.request(o);
    	} // eo function commitChanges
    
    	,requestCallback:function(options, success, response) {
    		if(true !== success) {
    			this.showError(response.responseText);
    			return;
    		}
    		try {
    			var o = Ext.decode(response.responseText);
    		}
    		catch(e) {
    			this.showError(response.responseText, 'Cannot decode JSON object');
    			return;
    		}
    		if(true !== o.success) {
    			this.showError(o.error || 'Unknown error');
    			return;
    		}
    
    		switch(options.params.cmd) {
    			case 'saveData':
    				var records = this.store.getModifiedRecords();
    				Ext.each(records, function(r, i) {
    					if(o.insertIds && o.insertIds[i]) {
    						r.set(this.idName, o.insertIds[i]);
    						delete(r.data.newRecord);
    					}
    				});
    				this.store.commitChanges();
    			break;
    
    			case 'deleteData':
    			break;
    		}
    	} // eo function requestCallback
    
    	,showError:function(msg, title) {
    		Ext.Msg.show({
    			 title:title || 'Error'
    			,msg:Ext.util.Format.ellipsis(msg, 2000)
    			,icon:Ext.Msg.ERROR
    			,buttons:Ext.Msg.OK
    			,minWidth:1200 > String(msg).length ? 360 : 600
    		});
    	} // eo function showError
    
    	,deleteRecord:function(record) {
    		Ext.Msg.show({
    			 title:'Delete record?'
    			,msg:'Do you really want to delete <b>' + record.get('company') + '</b><br/>There is no undo.'
    			,icon:Ext.Msg.QUESTION
    			,buttons:Ext.Msg.YESNO
    			,scope:this
    			,fn:function(response) {
    				if('yes' !== response) {
    					return;
    				}
    //				console.info('Deleting record');
    			}
    		});
    	} // eo function deleteRecord
    
    }); // eo extend
    
    grid2 = Ext.extend(Ext.grid.EditorGridPanel, {
     	url:'/admin/account/?config=3'
     	,id:'contactv'
    	,objName:'account'
    	,idName:'id'
    ,frame: true
    ,autoHeight: true
    ,title: 'Contacts'
    	,initComponent:function() {
    		this.recordForm2 = new Ext.ux.grid.RecordForm({
    			 title:'Contact'
    			,id:'contactform'
    			,iconCls:'icon-edit-record'
    			,columnCount:1
    			,ignoreFields:{id:true}
    			,formConfig:{
    				 labelWidth:80
    				,buttonAlign:'right'
    				,bodyStyle:'padding-top:10px'
    			}
    		});
    
    		// create row actions
    		this.rowActions2 = new Ext.ux.grid.RowActions({
    			 actions:[{
    				 iconCls:'icon-minus'
    				,qtip:'Delete Record'
    			},{
    				 iconCls:'icon-edit-record'
    				,qtip:'Edit Record'
    			}]
    			,widthIntercept:Ext.isSafari ? 4 : 2
    			,id:'actionscontact'
    		});
    		this.rowActions2.on('action', this.onRowAction2, this);
    
    		Ext.apply(this, {
    			// {{{
    			store:new Ext.data.Store({
    				reader:new Ext.data.JsonReader({
    					 id:'id'
    					,totalProperty:'totalCount'
    					,root:'rows'
    					,fields:[
    						 {name:'id', type:'int'}
    						,{name:'name', type:'string'}
    						
    					]
    				})
    				,proxy:new Ext.data.HttpProxy({url:this.url})
    				,baseParams:{cmd:'getData', objName:this.objName}
    				,sortInfo:{field:'company', direction:'ASC'}
    				,remoteSort:true
    			})
    			// }}}
    			// {{{
    			,columns:[{
    				 header:'Name'
    				,id:'name'
    				,dataIndex:'name'
    				,width:160
    				,sortable:true
    				,editor:new Ext.form.TextField({
    					allowBlank:false
    				})
    			}, this.rowActions2]
    			// }}}
    			,plugins:[new Ext.ux.grid.Search({
    				iconCls:'icon-zoom'
    				,readonlyIndexes:['note']
    				,disableIndexes:['pctChange']
    			}), this.rowActions2, this.recordForm2]
    			,viewConfig:{forceFit:true}
    			,buttons:[{
    				 text:'Save'
    				,iconCls:'icon-disk'
    				,scope:this
    				,handler:this.commitChanges
    			},{
    				 text:'Reset'
    				,iconCls:'icon-undo'
    				,scope:this
    				,handler:function() {
    					this.store.rejectChanges();
    				}
    			}]
    			,tbar:[{
    				 text:'Add Record'
    				,iconCls:'icon-plus'
    				,listeners:{
    					click:{scope:this, fn:this.addRecord2,buffer:200}
    				}
    			},{
    				 text:'Add Record'
    				,iconCls:'icon-form-add'
    				,listeners:{
    					click:{scope:this, buffer:200, fn:function(btn) {
    						this.recordForm2.show(this.addRecord2(), btn.getEl());
    					}}
    				}
    			}]
    		}); // eo apply
    
    		this.bbar = new Ext.PagingToolbar({
    			 store:this.store
    			,displayInfo:true
    			,pageSize:10
    		});
    
    		// call parent
    		grid2.superclass.initComponent.apply(this, arguments);
    	} // eo function initComponent
    	// {{{
    	,onRender:function() {
    		// call parent
    		grid2.superclass.onRender.apply(this, arguments);
    
    		// load store
    		this.store.load({params:{start:0,limit:10}});
    
    	} // eo function onRender
    	// }}}
    
    	,addRecord2:function() {
    		var store = this.store;
    		if(store.recordType) {
    			var rec = new store.recordType({newRecord:true});
    			rec.fields.each(function(f) {
    				rec.data[f.name] = f.defaultValue || null;
    			});
    			rec.commit();
    			store.add(rec);
    			return rec;
    		}
    		return false;
    	} // eo function addRecord
    
    	,onRowAction2:function(grid, record, action, row, col) {
    		switch(action) {
    			case 'icon-minus':
    				this.deleteRecord(record);
    			break;
    
    			case 'icon-edit-record':
    				this.recordForm2.show(record, grid.getView().getCell(row, col));
    			break;
    		}
    	} // eo onRowAction
    
    	,commitChanges:function() {
    		var records = this.store.getModifiedRecords();
    		if(!records.length) {
    			return;
    		}
    		var data = [];
    		Ext.each(records, function(r, i) {
    			var o = r.getChanges();
    			if(r.data.newRecord) {
    				o.newRecord = true;
    			}
    			o[this.idName] = r.get(this.idName);
    			data.push(o);
    		}, this);
    		var o = {
    			 url:this.url
    			,method:'post'
    			,callback:this.requestCallback
    			,scope:this
    			,params:{
    				 cmd:'saveData'
    				,objName:this.objName
    				,data:Ext.encode(data)
    			}
    		};
    		Ext.Ajax.request(o);
    	} // eo function commitChanges
    
    	,requestCallback:function(options, success, response) {
    		if(true !== success) {
    			this.showError(response.responseText);
    			return;
    		}
    		try {
    			var o = Ext.decode(response.responseText);
    		}
    		catch(e) {
    			this.showError(response.responseText, 'Cannot decode JSON object');
    			return;
    		}
    		if(true !== o.success) {
    			this.showError(o.error || 'Unknown error');
    			return;
    		}
    
    		switch(options.params.cmd) {
    			case 'saveData':
    				var records = this.store.getModifiedRecords();
    				Ext.each(records, function(r, i) {
    					if(o.insertIds && o.insertIds[i]) {
    						r.set(this.idName, o.insertIds[i]);
    						delete(r.data.newRecord);
    					}
    				});
    				this.store.commitChanges();
    			break;
    
    			case 'deleteData':
    			break;
    		}
    	} // eo function requestCallback
    
    	,showError:function(msg, title) {
    		Ext.Msg.show({
    			 title:title || 'Error'
    			,msg:Ext.util.Format.ellipsis(msg, 2000)
    			,icon:Ext.Msg.ERROR
    			,buttons:Ext.Msg.OK
    			,minWidth:1200 > String(msg).length ? 360 : 600
    		});
    	} // eo function showError
    
    	,deleteRecord:function(record) {
    		Ext.Msg.show({
    			 title:'Delete record?'
    			,msg:'Do you really want to delete <b>' + record.get('company') + '</b><br/>There is no undo.'
    			,icon:Ext.Msg.QUESTION
    			,buttons:Ext.Msg.YESNO
    			,scope:this
    			,fn:function(response) {
    				if('yes' !== response) {
    					return;
    				}
    //				console.info('Deleting record');
    			}
    		});
    	} // eo function deleteRecord
    
    });
    // register xtype
    Ext.reg('grid1', grid1); 
    Ext.reg('grid2', grid2);
    // app entry point
    Ext.QuickTips.init();
    var accountpan = new Ext.Panel({ 
            labelWidth:80,
            url:'login', 
            frame:true,
            autoHeight: true,
            height: 200,
            renderTo: 'accountindex', 
            title:'Accounts', 
    	// Specific attributes for the text fields for username / password. 
    	// The "name" attribute defines the name of variables sent to the server.
            items:[{xtype:'grid1', id:'grid1'}]
    });
    accountpan.show();
    var contactpan = new Ext.Panel({ 
            labelWidth:80,
            url:'login', 
            frame:true,
            autoHeight: true,
            height: 200,
            renderTo: 'accountindex2', 
            title:'Accounts', 
    	// Specific attributes for the text fields for username / password. 
    	// The "name" attribute defines the name of variables sent to the server.
            items:[{xtype:'grid2', id:'grid2'}]
    });
    contactpan.show();
    When i click on edit row in first grid it works.
    when i click on edit row in the second grid it will display the form from the first grid.

    Thanks for Help

  3. #103
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    I was trying to run your code but I do not see any onReady function. If you don't have it add it, if you have it post please the complete code that I can copy&paste&run.

    Thanks.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #104
    Sencha User
    Join Date
    Nov 2007
    Posts
    52
    Vote Rating
    0
      0  

    Default

    Hi

    I Load the code into an tabpanel.

    the app.js looks like:

    [CODE]
    DocPanel = Ext.extend(Ext.Panel, {
    closable: true,
    autoScroll:true,

    initComponent : function(){
    var ps = this.cclass.split('.');
    this.title = ps[ps.length-1];

    DocPanel.superclass.initComponent.call(this);
    },

    scrollToMember : function(member){
    var el = Ext.fly(this.cclass + '-' + member);
    if(el){
    var top = (el.getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
    this.body.scrollTo('top', top-25, {duration:.75, callback: this.hlMember.createDelegate(this, [member])});
    }
    },

    scrollToSection : function(id){
    var el = Ext.getDom(id);
    if(el){
    var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
    this.body.scrollTo('top', top-25, {duration:.5, callback: function(){
    Ext.fly(el).next('h2').pause(.2).highlight('#8DB2E3', {attr:'color'});
    }});
    }
    },

    hlMember : function(member){
    var el = Ext.fly(this.cclass + '-' + member);
    if(el){
    el.up('tr').highlight('#cadaf9');
    }
    }
    });

    MainPanel = function(){



    MainPanel.superclass.constructor.call(this, {
    id:'doc-body',
    region:'center',
    margins:'0 5 5 0',
    resizeTabs: true,
    minTabWidth: 135,
    tabWidth: 135,
    plugins: new Ext.ux.TabCloseMenu(),
    enableTabScroll: true,
    activeTab: 0,

    items: {
    id:'welcome-panel',
    title: '

  5. #105
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    Doesn't work copy & pasted:

    1) TabCloseMeny I've commented out, but
    2) POST http://extjseu.localhost/admin/app/tree 404
    3) GET http://extjseu.localhost/admin/app/overview 404
    4) this.el has no properties
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #106
    Sencha User
    Join Date
    Nov 2007
    Posts
    52
    Vote Rating
    0
      0  

    Default

    yes because it is an php app the tree becomse date from an php script.

    i will zip an example app.

  7. #107
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    BTW, your last code doesn't reference RecordForm.... ???
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  8. #108
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    Well, but unless I can run the code I cannot debug it....
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #109
    Sencha User
    Join Date
    Nov 2007
    Posts
    52
    Vote Rating
    0
      0  

    Default

    Hello,

    I have edit you example code to see the problem:

    [CODE]
    // vim: sw=4:ts=4:nu:nospell:fdc=4
    /**
    * Ext.ux.grid.RecordForm Plugin Example Application
    *
    * @author Ing. Jozef Sak

  10. #110
    Ext User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
      0  

    Default

    hi friend i am empressed alot with the way you solve the problems can you let me know how we can add element in a grid dependeing upon two values in the main form, let me tell you my requirement, i have to add that many months in the grid column as many as the difference between start date and duration.
    Suppose i have start date 4/23/2008 and duration 20 months so how i can add from april to 20 months ahead like april, may, june..............

Page 11 of 60 FirstFirst ... 91011121321 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •