# ext 行单机事件_使用基础EXT JS进行Cfgrid和行单击以及编辑

ext 行单机事件

CFGRID Custom Functionality Series -  Part 1CFGRID定制功能系列-第1部分

Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achieved what I needed. Here I will demonstrate how this thing can be done in ColdFusion CFGRID and in easy Way. Nothing extra ordinary is required, Just a Basic Knowledge of How JavaScript works is Enough.

Let Me start with the Tutorial now.  I will split this tutorial in the following way.

1. Populate a CFGRID with CFC Binding and Show the DATA in the CFGRID

1.使用CFC绑定填充CFGRID，并在CFGRID中显示数据

2. WE will create Custom Toolbar at Bottom for Showing the records

2.我们将在底部创建自定义工具栏以显示记录

3. We will create the Hyperlink to the Column we need.

3.我们将创建指向所需列的超链接。

4. We will modify the Column to look a bit seperate so it can be noticed that this is a hyperlink

4.我们将修改“列”以使其看起来有点分离，以便可以注意到这是一个超链接

5. We will now open the cfwindow or the Normal window on the click of this link and see how it goes.

5.现在，单击此链接，我们将打开cfwindow或“普通”窗口，并查看其运行方式。

So we will start with the Code. I will show how we can populate the grid. The Following method is use to Populate Grid with my Bind Value

<cfoutput>
<cfscript>
args = {};
args.bind = "cfc:CFC.myCFC.getDataForGrid({cfgridpage},{cfgridpagesize},
{cfgridsortcolumn},{cfgridsortdirection})";
args.delete = TRUE;
args.format = "html";
args.insert = false;
args.name = "SchedulesGrid";
args.pagesize = "5";
args.selectmode = "browse";
args.striperows = TRUE;
args.autowidth = true;
args.height = "205";
</cfscript>
<cfform name="SchedulesForm">
<cfgrid attributecollection="#args#" colHeaderBold="yes" collapsible="true" title="View Created Profile: <b>#Myquery.ProfileName#</b>">
<cfgridcolumn name="ScheduleDetailID" header=" ID" display="no" headerbold="yes" />
<cfgridcolumn name="ScheduleProfileID" header=" Schedule Profile ID" display="no" headerbold="yes" />
<cfgridcolumn name="type" header="Type of " width="108" headerbold="yes" />
<cfgridcolumn name="intervals" header="Intervals" width="108"  headerbold="yes"/>
<cfgridcolumn name="IntervalUnit" header="Unit" width="108"  headerbold="yes"/>
<cfgridcolumn name="duration" header="Duration" width="108"  headerbold="yes"/>
<cfgridcolumn name="to_whom" header="Followed" width="108" headerbold="yes" />
<cfgridcolumn name="reasonDetail" header="Reason" width="108" headerbold="yes"/>
<cfgridcolumn name="frequencyName" header="Frequency" width="108" headerbold="yes" />
<cfgridcolumn name="Template" header="Template(s) attached" width="137" headerbold="yes">
</cfgrid>
</cfform>
</cfoutput>


Above Code, Pretty Simple, I am just binding one CFC to the cfgrid and populating its values in the cfgrid columns, if you copy the above code and run it as it is, it will show you the query results. I assume here that you know how we return values from the query, we basically use QueryConvertForGrid to get back our results, So I am not going to explain that thing here

Now our Next Scenario, we all have seen now that we can get the results from the cfgrid. Now I have a situation where I need to create a link to the column. The cfgrid columns start from 0

In my Case, you can see that I have two fields in the grid which are set to display as "NO", I will create a link on the "TYPE" column of the cfgrid. Now here we go with our Javascript:

<script type="text/javascript">
function showWindow(thisID) {
window.open('details.cfm?DetailID=' + thisID,'Details','height=250,width=500,location=0,status=0,toolbar=0,resizable=0');
}
function init(){
grid = ColdFusion.Grid.getGridObject("SchedulesGrid");
cm = grid.getColumnModel();
cm.setRenderer(cm.getIndexById('TYPE'), hrefLinkCreator);
var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',id:Ext.id()},true);
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
gbbar = new Ext.PagingToolbar({
renderTo:bbar,
store: grid.store,
pageSize: 5,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>"
});
var ds = grid.getStore();
gridEl = grid.getGridEl();
grid.loadMask = true;
grid.getGridEl().mask("Please wait - loading data ...");
ds.on('load',function(){
grid.getGridEl().unmask();
});
grid.on('cellclick',function(grid,rowIndex,columnIndex,e){
//	We only want action on the 'Details' column
if(columnIndex==2){
//	Show the window
var thisID = ColdFusion.getElementValue("SchedulesGrid","SchedulesForm","ScheduleDetailID");
showWindow(thisID);
}
});
};
function hrefLinkCreator(value) {
return '<b style="color:#000;text-decoration:underline;">' + value + '</b>';
}
</script>


Now check this Code:

I am creating one Init function and doing all my processing here

let take it line by line

1. First I am getting the Grid Object name and storing it in the variable grid.

1.首先，我要获取Grid Object名称并将其存储在变量grid中。

2. Next, Create another variable and using the "getColumnModel()" of EXT js, I am storing the Column Details

2.接下来，创建另一个变量，并使用EXT js的“ getColumnModel（）”，我将存储列详细信息

3. I am using the setRenderer to detect the gridColumn by its Name, Check the Name i referred with getIndexbyId should be in Capital letters, and then I apply one function to it. Which is used at the end of the script to create a link to that renderer.

3.我正在使用setRenderer通过它的名称检测gridColumn，检查用getIndexbyId引用的名称应该用大写字母表示，然后将一个函数应用于它。 在脚本末尾使用它来创建到该渲染器的链接。

4. I am creating a toolbar for bottom and top panels and adding the code to detect the records available. the information of this will be shown in the bottom right side of the cfgrid.

4.我正在为底部和顶部面板创建一个工具栏，并添加代码以检测可用的记录。 该信息将显示在cfgrid的右下方。

5. "var ds = grid.getStore();
gridEl = grid.getGridEl();
grid.loadMask = true;
grid.getGridEl().mask("Please wait - loading data ...");
ds.on('load',function(){
grid.getGridEl().unmask();
});
" -  This code is something which users need it in many cases. This is Just displaying the Loading icon, in the case if you have records which are are many and the query is taking a lot of time to show these records on the page, it will display a nice loading icon inside the cfgrid.

5.“

6. This is the one line where I render the cell grid.on('cellclick',function(grid,rowIndex,columnIndex,e){ and detect the columnindex which is 2 in my case and create a link on it. I just added the

6.这是我渲染单元格grid.on（'cellclick'，functi 上（网格，ro wIndex，col umnIndex，e ）{，并检测我的情况下columnIndex为2并在其上创建一个链接。 我刚刚添加了

if(columnIndex==2){if（columnIndex == 2）{

//      Show the window

//显示窗口

var thisID = ColdFusion.getElementValue("TouchSchedulesGrid","TouchSchedulesForm","TouchScheduleDetailID");

var thisID = ColdFusion.getElementValue （“ TouchSch edulesGrid “，” TouchSc 对于 m“，” TouchS 时间表 ailID“）;

showWindow(thisID);

showWindow（thisID）;

}

}

to detect the value of the gridcolumn and attach that value to the showWindow function. At the top of the script, if you see I have added the showWindow() function which will open a popup to the user passing the id and based upon that, you can detect the value and do anything you want to to on the details section of the opened window .

Last is the Function hrefLinkCreator() which is used in the setRenderer to create a link and color code it so it looks different and easily noticeable that this is a hyperlink.

That's all the cfgrid is ready with your custom Amendments.

cfgrid即可使用您的自定义修正案准备就绪。

Ok, at last I forgot, I told that if user needs to open the cfwindow then what should be done. That is simple enough

Just replace the showWindow  code with this one as:

showWindow = function() {
var day = new Date();
PID  = 'Details' + day.getTime();
var windowOptions = new Object();
windowOptions.width = 700;
windowOptions.height = 300;
windowOptions.x = 400;
windowOptions.y = 400;
windowOptions.modal = true;
windowOptions.refreshOnShow = true;
windowOptions.destroyOnClose = true;
windowOptions.resizeable = true;
windowOptions.initshow = true;
windowOptions.draggable = true;
windowOptions.closable = true;
ColdFusion.Window.create(PID,'Details','details.cfm?DetailID=' + thisID + '&random=' + Math.random(Math.random() * 10000000000), windowOptions);
}
}


At the bottom End You just need to add the following :

<cfset AjaxOnLoad("init")>

<cfset AjaxOnLoad（“ init”）>

else it will not work

Cheers. Comment/Suggest if you need more Details to more features. I will update the article.

This is a series. I will increasing the series with more and more features and playing cfgrid

Please vote it if you find it useful

Thanks

ext 行单机事件

• 0
点赞
• 0
评论
• 0
收藏
• 扫一扫，分享海报

04-16 134
10-28 1898

12-01 2265
09-02 554
08-25 365
05-24 337
08-12 288
12-10 285
11-06 168
01-19 1238
©️2022 CSDN 皮肤主题：编程工作室 设计师：CSDN官方博客

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。