Anyone know how to Remove the Paging Toolbar from UIView?

[sandymonroe]

This stuff is GREAT!!!! Amazing work!!!!

I am brand new to EXt but not to Domino which I have been doing since version 3 first came out. I am trying to use the UIView of EXT.nd for embedded views and have been able to adjust everything I needed but 2 things. Remember I am new.


I want to turn off the paging toolbar to allow the embedded view to have a cleaner look.
I would like some of these embedded views to resizable by the user - is this possible in Ext.nd yet or only in EXT?


If anyone could direct me to where and how to use the documentation, it would really be appreciated... I find bits and pieces here and there but nothing like what I need to really work with this.

HTML header was copied from the sample form... has not been adjusted except to load some extra css used by other parts of the application:

dbPath := "/" + @WebDbName + "/";
ServerName := @ServerName;
unid := @Text(@DocumentUniqueID);
extndUrl := @GetProfileField("Ext.nd.Profile"; "ExtNDDb"; ServerName);
mode := @If(@UrlQueryString("debug") = "true"; "-debug"; "");

uidoc := @If(@IsNewDoc;
"Ext.nd.UIDocument?ReadForm";
"($Ext.nd.SwitchForm)/" + unid + "?OpenDocument&form=Ext.nd.UIDocument");

"<!-- Ext JS library -->" + @NewLine +
"<script type='text/javascript' src='" + extndUrl + "ext/adapter/ext/ext-base.js'></script>" + @NewLine +
"<script type='text/javascript' src='" + extndUrl + "ext/ext-all" + mode + ".js'></script>" + @NewLine +

"<!-- Ext.nd JS library -->" + @NewLine +
"<script type='text/javascript' charset='ISO-8859-1' src='" + extndUrl + "extnd/extnd-all" + mode + ".js'></script>" + @NewLine +
"<script type='text/javascript' src='" + dbPath + "Ext.nd.Session.js?ReadForm'></script>" + @NewLine +
"<script type='text/javascript'>" + @NewLine +
" Ext.nd.init({extndUrl : '" + extndUrl + "'});" + @NewLine +
"</script>" + @NewLine +
"<script type='text/javascript' src='" + dbPath + uidoc + "'></script>" + @NewLine +


"<link rel='stylesheet' type='text/css' href='" + extndUrl + "ext/resources/css/ext-all.css' />" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + extndUrl + "ext/resources/css/xtheme-aero.css' />" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + extndUrl + "extnd/resources/css/domino.css' />"+ @NewLine +

"<script type=\"text/javascript\" src=\"/intra/codelibrary.nsf/overlib.js\"></script>" + @NewLine +
"<script type=\"text/javascript\" src=\"/intra/misreq.nsf/lib/prototype.js\"></script>" + @NewLine+
"<script type=\"text/javascript\" src=\"/intra/misreq.nsf/util/effects.js\"></script>"+ @NewLine+
"<link rel='stylesheet' type='text/css' href='" + dbPath + "MainForm.css'>" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + dbPath + "DatePicker.css'>" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + dbPath + "NamePick.css'>" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + dbPath + "Basic.css'>"


<div id="grid-example" style="height:200px; margin:20px 50px; border:2px solid">
embedded html view shows here
</div>

JsHeader code:

var ShowEViews = function(){
var ws;
var showBtn, dialog;
var frm;

return {
init : function() {

var groupEmbeddedView = new Ext.nd.UIView({
viewName : 'Applet Assignment View',
container : 'groupEmbeddedView',
height : 300,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value,
emptyText : "No Assignment documents for this Request found...."
});

var historyEmbeddedView = new Ext.nd.UIView({
viewName : 'Applet History View',
container : 'historyCommentsEmbeddedView',
height : 300,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value,
emptyText : "No History or Comment documents for this Request found...."
});

var correspondenceEmbeddedView = new Ext.nd.UIView({
viewName : 'Applet Correspondence View',
container : 'correspondenceEmbeddedView',
height : 600,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value,
emptyText : "No Correspondence documents for this Request found...."
});

var attachmentEmbeddedView = new Ext.nd.UIView({
viewName : 'Applet Attachment View',
container : 'attachmentEmbeddedView',
height : 300,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value,
emptyText : "No Attachment documents for this Request found...."
});

var changeRequestEmbeddedView = new Ext.nd.UIView({
viewName : 'Applet Change Request View',
container : 'changeRequestEmbeddedView',
height : 300,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value,
emptyText : "No Change Request documents for this Request found...."
});

var mainTabs = new Ext.TabPanel('mainTabs');
mainTabs.addTab("mainTabs_ITRequest", "Request");
mainTabs.addTab("mainTabs_MISInfo", "IT Information");
mainTabs.addTab("mainTabs_Groups", "Group Assignments");
mainTabs.addTab("mainTabs_History", "History / Comments");
mainTabs.addTab("mainTabs_Correspondence", "Correspondence");
mainTabs.addTab("mainTabs_Attach", "Attachments");
mainTabs.addTab("mainTabs_ChangeRequests", "Change Requests");
mainTabs.addTab("mainTabs_wfDetails", "Workflow Details");
mainTabs.hideTab("mainTabs_ChangeRequests");
mainTabs.activate("mainTabs_ITRequest");
}
};
}();

Ext.onReady(ShowEViews.init, ShowEViews, true);

example of "Embedded views" are designated in this format and seem to work properly:

<div id="groupEmbeddedView" style="height:200px; width:950px; overflow:hidden; margin:10px 10px; border:1px solid; position:relative">Loading view, please wait....</div>

Example of Tabs and tab panels are designated with the following pass through html:
<div id="mainTabs" style="margin:5px 5px; border:1px solid">
<div id="mainTabs_ITRequest" class="tab-content" style="padding: 5px;">

data
</div>
</div>

It's beginning to come together - still having problems and still have same questions.

Any help for a newbie would be very appreciated! Thanks so much!

Sandy Monroe
sandy.monroe@scansource.com

[anthonydomino]

Hi,

change " this.includeSouth=true" to false in extnd/extnd-all.js

Hope this can help

[jratcliff]

First, sorry that I missed this post from way back in September! Been busy moving the family from Georgia to Missouri so I haven't had much time to keep up with the forums.

In any case, I guess we haven't setup an easy way to hide the paging toolbar. However, since we are just working with an Ext.Grid and Ext.GridView, I would try this.

groupEmbeddedView.grid.getView().getFooterPanel(false);

The 'false' tells the grid to hide the footer panel. So try this for each of your views and let us know if it works.

[sandymonroe]

var myApp = function() {
var ws;
var showBtn, dialog;
var frm;
var containerEl;

return {
init : function() {

frm= new Ext.nd.Form();

var mainTabs = new Ext.TabPanel('mainTabs');
mainTabs.addTab("mainTabs_ITRequest", "Request");
mainTabs.activate(0);

containerEl = Ext.get(mainTabs.getActiveTab().id);
containerEl.mask('Document loading...','x-mask-loading');

mainTabs.addTab("mainTabs_MISInfo", "IT Information");
mainTabs.addTab("mainTabs_Groups", "Group Assignments");
mainTabs.addTab("mainTabs_History", "History / Comments");
mainTabs.addTab("mainTabs_Correspondence", "Correspondence");
mainTabs.addTab("mainTabs_Attach", "Attachments");
mainTabs.addTab("mainTabs_ChangeRequests", "Change Requests");
mainTabs.addTab("mainTabs_wfDetails", "Workflow Details");
mainTabs.hideTab("mainTabs_ChangeRequests");

if (isNewDoc == "1" & isBeingEdited == "1" ) {
var date = new Ext.form.DateField({
allowBlank: false
});
if (document.forms[0].reqCompDate.value == "") {
date.applyTo('reqCompDate');
}
}

var groupEmbeddedView = new Ext.nd.UIView({
viewName : 'User Assignment View',
container : 'groupEmbeddedView',
height : 400,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value
});
groupEmbeddedView.grid.getView().getFooterPanel(false);


var historyEmbeddedView = new Ext.nd.UIView({
viewName : 'User History View',
container : 'historyCommentsEmbeddedView',
height : 400,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value
});

var correspondenceEmbeddedView = new Ext.nd.UIView({
viewName : 'User Correspondence View',
container : 'correspondenceEmbeddedView',
height : 400,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value
});

var attachmentEmbeddedView = new Ext.nd.UIView({
viewName : 'User Attachment View',
container : 'attachmentEmbeddedView',
height : 400,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value
});

var changeRequestEmbeddedView = new Ext.nd.UIView({
viewName : 'User Change Request View',
container : 'changeRequestEmbeddedView',
height : 400,
count : 20,
showActionbar : false,
searchInPagingToolbar : false,
showSearch : false,
showCategoryComboBox : false,
showSingleCategory : document.forms[0].mainKey.value
});

}// end init
}// end 'return'
}();
Ext.onReady(myApp.init, myApp, true);




I added one test line in and receive an error back of 'grid' is null or not an object. Not sure where to go from here but so appreciate your help.

Anymore help would be appreciated. I posted the JS Header code again because it has changed. The HTML Head content stayed the same except for a theme change. The only other thing that changed was at the bottom of the onload is code to turn off the mask:

// Remove loading mask
Ext.get("mainTabs_ITRequest").unmask();

which works great for me but not for others for some reason. The mask never turns off for other users though I am not sure why. In production the mask is just turned off completely.

Thanks for your help!

Sandy