PDA

View Full Version : PHP ExtJS class



dajester2008
12 Apr 2010, 8:29 PM
I hope it is ok to post this here, seeing as it is not truly a plugin to Ext, however, I really would like to post this and start getting some feedback.

After trying to use the PHP-Ext library, I realized it would not integrate very well with the framework I am writing. So, as I often decide to do, I wrote one myself. It basically is an object that listens for undefined methods ($ext->Ext_Panel() for instance), and return a generic object that has a classpath set to the function name with the underscores turned into periods. The methods must begin with 'Ext_' to work. Pretty simple. It can be extended by calling ->import('...'), and passing the class name to import. The methods from the imported class can then be called directly from the parent object, so that if you had custom code you want to use when calling ->Ext_Panel(), simply write a class with that exact method name, and import it into the base object.

Besides what I have written here, I do not have much documentation on my code (sorry!!!), but I think it is fairly straight-forward. I pulled it out of the resources for my framework, so the files may still have the GPL license in them from my framework. This code is also under the GPL, although I'm considering LGPL if need be. Basically, I have appreciated the work done by everyone else, and I want to (hopefully) contribute something useful in return - I don't mind where/how you use this code, if you find it useful.

Anyways, to get you started you can find in the attached zip file, all the classes as well as an example of how to pull in the class and start using it found in index.php.

Also, the following is an example of how I'm using this library in my own application:


$ext = &jfw::$libs->import('jfw_ext'); // paths are already automatically set by the framework...

$ext->includeUxCss('RowEditor/css/RowEditor.css');
$ext->includeUx('RowEditor/RowEditor.js');

$ext->includeUx('contextActions.js');

$ext->includeUx('maxLengthEnforcer.js');

$ext->includeUx('CheckColumn.js');

$ext->includeUx('md5.js');

/*******************/
/* User Roles Grid */
/*******************/
$userRolesStore = $ext->Ext_data_GroupingStore(array(
'storeId'=>'userRolesStore'
,'url'=>$this->getViewLink('mvc.modelToJson','data.userRoleList')
,'reader'=>$ext->Ext_data_JsonReader(array(
'root'=>'query.data'
,'remoteSort'=>true
,'fields'=>array(
array('name'=>'access_id', 'type'=>'int')
,array('name'=>'access_name')
,array('name'=>'access_code')
,array('name'=>'access_public', 'type'=>'int')
,array('name'=>'module_id', 'type'=>'int')
,array('name'=>'module_code')
,array('name'=>'module_name')
,array('name'=>'user_has_access', 'type'=>'int')
,array('name'=>'site_id', 'type'=>'int')
)
))
,'baseParams'=>array(
'user_id'=>''
)
,'autoLoad'=>false
,'remoteGroup'=>true
,'groupField'=>'module_name'
));
echo $ext->onReady(
$userRolesStore->toJavascript('userRolesStore') // compiles this object to JS and assigns it to the 'userRolesStore' javascript variable...
,$ext->Ext_grid_CheckColumn(array(
'id'=>'uha2'
,'header'=>'User Has Access'
// use $ext->js('...') to include a custom piece of javascript code as in this instance to assign a handler / renderer etc...
,'renderer'=>$ext->js("function(v, p, record){
if (v == 2)
return 'Registered Users';
else if (v == 3)
return 'Public';

p.css += ' x-grid3-check-col-td';
p.attr = String.format('style=\"background-color:{0};\"',v?'green':'red');
return String.format('<div class=\"x-grid3-check-col{0} {1}\"> </div>', v ? '-on' : '', this.createId());
}")
,'onMouseDown'=>$ext->js("function(e,t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var cm = this.grid.getColumnModel();
var cIdx = cm.getIndexById(this.id);
if (!this.grid.fireEvent('beforecellcheck',this.grid,e,record,index,cIdx,this.dataIndex||''))
return;
record.set(this.dataIndex, (record.data[this.dataIndex] == 1)?0:1);
this.grid.fireEvent('cellcheck',this.grid,e,record,index,cIdx,this.dataIndex||'');
}
}")
,'dataIndex'=>'user_has_access'
))->toJavascript('userRoleCol')
);
$userRolesGrid = $ext->Ext_grid_GridPanel(array(
'id'=>'userRolesGrid'
,'ref'=>'userRolesGrid'
,'title'=>'User Roles Assignments'
,'store'=>$ext->js('userRolesStore')
,'plugins'=>array($ext->js('userRoleCol'))
,'autoExpandColumn'=>'access_name'
,'columns'=>array(
array('id'=>'module_name' ,'header'=>'Module Name' ,'dataIndex'=>'module_name')
,array('id'=>'access_name' ,'header'=>'Role' ,'dataIndex'=>'access_name')
,$ext->js('userRoleCol')
)
,'view'=>$ext->Ext_grid_GroupingView(array('hideGroupedColumn'=>true))
));

$userRolesGrid->on('cellcheck',$ext->js('function(grid,e,rec,ri,ci,di) {
var res = false;
if (rec.data.user_has_access == 1) {
res = actions.assignUserAccess(grid.store.baseParams.user_id,rec.data.access_id);
} else {
res = actions.removeUserAccess(grid.store.baseParams.user_id,rec.data.access_id);
}

if (res)
rec.commit();
else
rec.reject();
}'));

/****************/
/* Basic Layout */
/****************/
echo $ext->onReady(

// User Right Assignments
$ext->Ext_Window(array(
'id'=>'usrAssnWin'
,'title'=>'User Assignments'
,'modal'=>true
,'resizable'=>true
,'closeAction'=>'hide'
,'layout'=>'fit'
,'width'=>500
,'listeners'=>array(
'show'=>$ext->js('function() {this.setHeight(5);this.setHeight(Ext.getBody().getHeight()*.8);this.center();}')
)
,'items'=>array(
$ext->Ext_TabPanel(array(
'activeTab'=>0
,'items'=>array(
$userGroupsGrid
,$userRolesGrid
)
))
)
,'bbar'=>$ext->Ext_Toolbar(array(
'items'=>array(
$ext->Ext_Toolbar_Fill()
,array('text'=>'Finished','icon'=>$this->getImageUrl('icons/accept.png'),'handler'=>$ext->js('function() { usrAssnWin.hide(); }'))
)
))
))->toJavascript('usrAssnWin') // compiles this object to JS and assigns it to the 'userAssnWin' javascript variable...

// Group Right Assignments
,$ext->Ext_Window(array(
'id'=>'groupAssnWin'
,'title'=>'Group Assignments'
,'modal'=>true
,'resizable'=>true
,'closeAction'=>'hide'
,'width'=>500
,'listeners'=>array(
'show'=>$ext->js('function() {this.setHeight(Ext.getBody().getHeight()*.8);this.center();}')
)
,'layout'=>'fit'
,'items'=>array(
$groupRolesGrid
)
,'bbar'=>$ext->Ext_Toolbar(array(
'items'=>array(
$ext->Ext_Toolbar_Fill()
,array('text'=>'Finished','icon'=>$this->getImageUrl('icons/accept.png'),'handler'=>$ext->js('function() { groupAssnWin.hide(); }'))
)
))
))->toJavascript('groupAssnWin') // compiles this object to JS and assigns it to the 'groupAssnWin' javascript variable...

// Main Viewport
,$ext->Ext_Viewport(array(
'layout'=>'border'
,'items'=>array(
$ext->Ext_TabPanel(array(
'ref'=>'MainTabs'
,'region'=>'center'
,'activeTab'=>0
,'items'=>array(
$usersGrid
,$groupsGrid
)
))
)
))
);
Basically, get an instance of 'new jfw_ext()' class. When you call a method like Ext_grid_GridPanel(), it returns a generic object that will get serialized in Javascript as new Ext.grid.GridPanel().

I'm sure there will be questions to come, hopefully I'll be able to answer them.