Coolite簡単な例-GridPanelリストの削除プレビュー

56737 ワード

この例はCooliteの簡単な応用にすぎず、初心者が勉強していると信じています.皆さんにも頭を持って、初心者のチュートリアルを書きます.
GridPanelは紹介しないNet開発者はよく知っているはずです.公式のGridViewバインドデータはSqlDataSource,ObjectDataSource等によりバインドする.
ここでGridPanelは、データをバインドするためにStoreを必要とする.まず、次のようにページにStoreを追加します.

<ext:Store ID="Store1" runat="server" OnRefreshData="RefreshData">
    <Reader>
        <ext:JsonReader ReaderID="Id">
            <Fields>
                <ext:RecordField Name="Id" />
                <ext:RecordField Name="Title" />
                <ext:RecordField Name="Content" />
                <ext:RecordField Name="NewsTime" />
                <ext:RecordField Name="Category" />
            Fields>
        ext:JsonReader>
    Reader>
ext:Store>

ここでは、JsonReader、そしてArrayReader、XmlReaderを使いました.JsonReaderバインドのデータフォーマットはJSONタイプで、ここでバックグラウンドで私がバインドしているのはDataTableで、肝心な部分Fieldsの下で、Nameが指定した名前は、バックグラウンドでバインドするデータのフィールド名と一致しなければなりません.Reader IDはプライマリ・キーを指定したことに相当すると理解しています.ここでは、重要な部分を見て説明します.

protected void Bind()
{
string sql = "SELECT NewsInfo.Id, NewsInfo.Title, NewsInfo.Content,NewsInfo.NewsTime, " +
"CategoryInfo.Category FROM NewsInfo, CategoryInfo WHERE NewsInfo.Category = CategoryInfo.Id order by NewsInfo.Id";

DataTable dt = DbHelper.GetDataTable(sql);

this.Store1.DataSource = dt;
this.Store1.DataBind();

}

気にしないで、私のSQL文はどのように書いて、DataTableに戻ればいいです.GridViewと同様に、DataSourceはデータを指定し、DataBind()OK、データバインド完了.一般的にPage_ロードで呼び出す次はGridPanelを用意しましょう.

<ext:GridPanel ID="GridPanel1" runat="server" Title="    " Width="840" AutoHeight="true"
Frame="false" StoreID="Store1" Icon="Information">
    <TopBar>
        <ext:Toolbar ID="Toolbar1" runat="server">
            <Items>
                <ext:Button ID="Add" runat="server" Text="    " Icon="TableAdd">
                    <Listeners>
                        <Click Handler="News.BindNewsCate();#{Window1}.show();" />
                    Listeners>
                ext:Button>
                <ext:TextField ID="txtNewKey" runat="server" AllowBlank="false" EmptyText="        !">
                ext:TextField>
                <ext:Button ID="btnSearch" runat="server" Text="   " Icon="Find">
                    <AjaxEvents>
                        <Click OnEvent="SearchNews">
                            <EventMask ShowMask="true" Msg="    ..." />
                        Click>
                    AjaxEvents>
                ext:Button>
            Items>
        ext:Toolbar>
    TopBar>
    <ColumnModel runat="server" ID="ct102">
        <Columns>
            <ext:Column ColumnID="id" DataIndex="Id" Width="60" Header="  " Hidden="false">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
            ext:Column>
            <ext:Column ColumnID="title" DataIndex="Title" Width="150" Header="    ">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
            ext:Column>
            <ext:Column ColumnID="content" DataIndex="Content" Width="280" Header="    ">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
            ext:Column>
            <ext:Column ColumnID="category" DataIndex="Category" Width="100" Header="    ">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
            ext:Column>
            <ext:Column ColumnID="newsTime" DataIndex="NewsTime" Width="100" Header="    ">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
            ext:Column>
            <ext:ImageCommandColumn Width="100" Header="  " ColumnID="Comman" Resizable="true">
                <Commands>
                    <ext:ImageCommand CommandName="Delete" Icon="TableDelete" Text="  ">
                        <ToolTip Text="Delete" />
                    ext:ImageCommand>
                    <ext:ImageCommand CommandName="Edit" Icon="TableEdit" Text="  ">
                        <ToolTip Text="Edit" />
                    ext:ImageCommand>
                Commands>
                <PrepareGroupCommand Handler="" Args="grid,command,groupId,group" FormatHandler="False">
                PrepareGroupCommand>
                <PrepareCommand Fn="prepareCommand" />
            ext:ImageCommandColumn>
            <ext:Column ColumnID="details" DataIndex="Id" Width="50" Header="  " Sortable="false"
MenuDisabled="true">
                <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False">
                PrepareCommand>
                <Renderer Fn="details" />
            ext:Column>
        Columns>
    ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel runat="server" ID="rowselect">
        ext:RowSelectionModel>
    SelectionModel>
    <LoadMask ShowMask="true" Msg="    ..." />
    <BottomBar>
        <ext:PagingToolbar runat="server" PageSize="15" StoreID="Store1" ID="paging">
        ext:PagingToolbar>
    BottomBar>
    <Listeners>
        <Command Fn="gridCommand" />
    Listeners>
--
        
            
                
                
                
                
            
        
              ,           ,Parameter        --%>
ext:GridPanel>

GridPanelのStoreIDはデータがどのStoreから来るかを指定して、Columnsの下の編集と削除、私はImageCommandColumnを使って、CommandNameを指定して、Commandを実行する時判断する必要があります.プレビューはを使用してカスタマイズする.ここでFnはJavaScriptメソッドを指定します

function details(Id) {
    var temp = '  ';
return String.format(temp, Id);
}

Idは、行毎のデータのプライマリキー列である、ReadererはGridPanelの初期化時に実行されるべきである.SelectionModelリスト選択モード、PagingToolbarページングツールバーを指定します.次に、ImageCommandColumneのCommandsのクリックイベントのリスニングを指定します.同様に、Jsメソッドを指定して、バックグラウンドで判断することもできますが、フロントで判断することを主張します

var gridCommand = function(command, record, rowIndex) {
if (command == "Edit") {

var id = record.data.Id;
//  id     content  ,    fck .
News.GetContentById(id, {
            success: function(result) {
var Editor = FCKeditorAPI.GetInstance('FCKeditor2');
                Editor.SetHTML(result);
            }
        });

var title = record.data.Title;  //    
var category = record.data.Category;    //    

        //       
News.EditSetNews(id, title, category,
        {
            success: function(result) {
                News.BindNewsCate();
                Window2.show();
            }
        });
    }
if (command == "Delete") {
        Ext.Msg.confirm('  ', '          ?', function(btn) {
if (btn == 'yes') {
                News.DeleteNews(record.data.Id);
            }
        });
    }
};

ここのパラメータリストはこれの順番でいいです.Args=「grid,command,record,row,col,value」、具体的なパラメータはいくらですか.あなたのニーズに応じて.commandは上で指定したCommandNameですが、
ここで、編集操作か削除操作かを判断することができる.jsにはNewsがバックグラウンドのAjaxMethodメソッドを呼び出していることがわかります.NewsはCooliteに相当します.AjaxMethods、次のようになります.

<ext:ScriptManager ID="ScriptManager1" runat="server" AjaxMethodNamespace="News">
ext:ScriptManager>

AjaxMethodNamespaceはNewsを指定した.GetContentByIdはバックグラウンドにIdを渡して、私はニュースの本文に戻ることができることを望んで、私は編集ウィンドウに値を割り当てる必要があるため、編集ウィンドウはFckeditorを使って、
ASPでもあります.NETコントロールvar Editor = FCKeditorAPI.GetInstance('FCKeditor2'); Fckを呼び出すAPI、Editor.SetHTML(result); 戻り値をFckオブジェクトに割り当てる.ここでなぜこのように値をつけるのか、やってみる友人は、CooliteのAjaxメカニズムで値を伝達することで、バックグラウンドではCooliteコントロール以外の値を取得できないことを知っているはずだ.zorkの指導に感謝します.ほほほ.Idによりコンテンツを取り出すコードは貼られず、バックグラウンドに[AjaxMethod()と表記する方法でStringに戻る.ここは人を振り回して、他のフィールドは、バックグラウンドに設置する必要があります.EditSetNews.ほほほもっと良い解決策があることを望みます.News.BindNewsCate();
これは私が編集をクリックする時、Winodw 2 showが出る前に、ユーザーがここで別のページに新しい分類を追加した可能性が高いので、ニュースの分類を再バインドしたいと思っています.ここでは事前にページにwindowを置きました.

<ext:Window ID="Window2" runat="server" AutoHeight="true" Width="800" Maximizable="true"
Modal="true" Title="    " Icon="TableEdit" AutoShow="false">
    <Body>
        <ext:FormPanel ID="FormPanel2" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">
            <Body>
                <ext:FormLayout ID="FormLayout2" runat="server">
                    <ext:Anchor Horizontal="100%">
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="    " AllowBlank="false"
BlankText="       !">
                        ext:TextField>
                    ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                        <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store2" DisplayField="Category"
AllowBlank="false" ValueField="Id" EmptyText="    ..." FieldLabel="    ">
                        ext:ComboBox>
                    ext:Anchor>
                    <ext:Anchor Horizontal="%100">
                        <ext:Panel runat="server" ID="_editArea2" AutoWidth="true" Height="500">
                            <Body>
                                <FCKeditorV2:FCKeditor ID="FCKeditor2" runat="server">
                                FCKeditorV2:FCKeditor>
                            Body>
                        ext:Panel>
                    ext:Anchor>
                    <ext:Anchor Horizontal="%100">
                        <ext:Hidden ID="Hidden1" runat="server">
                        ext:Hidden>
                    ext:Anchor>
                ext:FormLayout>
            Body>
            <Buttons>
                <ext:Button ID="Button3" runat="server" Icon="Disk" Text="  ">
                    <Listeners>
                        <Click Fn="SaveNews" />
                    Listeners>
                ext:Button>
                <ext:Button ID="Button4" runat="server" Icon="Cancel" Text="  ">
                    <Listeners>
                        <Click Handler="Window2.hide();" />
                    Listeners>
                ext:Button>
            Buttons>
        ext:FormPanel>
    Body>
ext:Window>

AutoShow="false",ページロードは表示されず,,保存するか編集ウィンドウの値を取得するかjsメソッドを使用するか:

//      
var SaveNews = function() {
var Editor = FCKeditorAPI.GetInstance('FCKeditor2');
var content = Editor.GetXHTML(true); //       

News.EditSaveNews(content);
}

編集ウィンドウの値をバックグラウンドに転送します.ここでcontentは編集ウィンドウのHTMLソースコードで、バックグラウンドCooliteに転送するのはすでに符号化されているので、バックグラウンドがデータベースに保存される前に、復号しなければなりません.そうしないと、今度取り出して、復号しなければなりません.もう1つのHiddenは編集情報のIDを保存するために更新する.

string newsContent = HttpUtility.HtmlDecode(content);

編集機能はここまでです.削除操作は比較的簡単で、ヒントを与えて、YESは削除を実行して、同様にバックグラウンドの削除方法を呼び出します.

[AjaxMethod()]
public void DeleteNews(int Id)
{
string sql = "delete from NewsInfo where Id = " + Id + "";
int result = DbHelper.ExecuteSql(sql);
if (result > 0)
    {
//    
Ext.Msg.Show(new MessageBox.Config
{
            Title = "  ",
            Message = "           !",
            Icon = MessageBox.Icon.INFO,
            Buttons = MessageBox.Button.OK
        });
this.Bind();//   Store    
    }
else
{
//    
Ext.Msg.Show(new MessageBox.Config
{
            Title = "  ",
            Message = "      ,     !",
            Icon = MessageBox.Icon.ERROR,
            Buttons = MessageBox.Button.OK
        });
    }
}

削除に成功したら、ヒントを与えて、Bind()を再起動します.プレビューを表示するには、ページを結合する必要があります.ここでは説明しません.プレビューパスを指定するだけです.追加を見て、ToolbarにButtonを追加し、事前に準備したWindow 1をポップアップしました.

<ext:Window ID="Window1" runat="server" AutoHeight="true" Width="800" Maximizable="true"
Modal="true" Title="    " Icon="TableAdd" AnimateTarget="Add">
    <Body>
        <ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" AutoHeight="true" AutoWidth="true" Icon="NewspaperAdd">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <ext:Anchor Horizontal="100%">
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="    " AllowBlank="false"
BlankText="       !" EmptyText="        .">
                        ext:TextField>
                    ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                        <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store2" DisplayField="Category"
AllowBlank="false" ValueField="Id" EmptyText="    ..." FieldLabel="    ">
                        ext:ComboBox>
                    ext:Anchor>
                    <ext:Anchor Horizontal="%100">
                        <ext:Panel runat="server" ID="_editArea" AutoWidth="true" Height="500">
                            <Body>
                                <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Value="">
                                FCKeditorV2:FCKeditor>
                            Body>
                        ext:Panel>
                    ext:Anchor>
                ext:FormLayout>
            Body>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Icon="Disk" Text="  ">
                    <Listeners>
                        <Click Fn="addnews" />
                    Listeners>
                ext:Button>
                <ext:Button ID="Button2" runat="server" Icon="Cancel" Text="  ">
                    <Listeners>
                        <Click Handler="Window1.hide();" />
                    Listeners>
                ext:Button>
            Buttons>
        ext:FormPanel>
    Body>
ext:Window>

編集原理と同様に、エディタの内容を取得し、バックグラウンドの追加方法を呼び出す.追加後もBind()にご注意ください.もう一つの機能は検索です.キーワードを入力します.私のところは簡単な検索です.TitleとContentで検索します.

protected void SearchNews(object sender, AjaxEventArgs e)
{
string newkey = this.txtNewKey.Text;
if (newkey.Equals(""))
    {
Ext.Msg.Show(new MessageBox.Config
{
            Title = "  ",
            Message = "           !",
            Buttons = MessageBox.Button.OK,
            Icon = MessageBox.Icon.INFO
        });
    }
else
{


string sql = "SELECT NewsInfo.Id, NewsInfo.Title, NewsInfo.Content,NewsInfo.NewsTime, " +
"CategoryInfo.Category FROM NewsInfo, CategoryInfo WHERE NewsInfo.Category = CategoryInfo.Id " +
"and (NewsInfo.Title like '%" + newkey + "%' or NewsInfo.Content like '%" + newkey + "%') order by NewsInfo.Id";

DataTable dt = DbHelper.GetDataTable(sql, CommandType.Text, new OleDbParameter[] { });

if (dt.Rows.Count > 0)
        {
this.Store1.DataSource = ChangeDataTable(dt);
this.Store1.DataBind();
        }
else
{
Ext.Msg.Show(new MessageBox.Config
{
                                Title = "    ",
                                Message = "     " + newkey + "      !",
                                Buttons = MessageBox.Button.OK,
                                Icon = MessageBox.Icon.INFO
                            });
        }
    }
}

すべての機能と流れはこれらで、きっといくつかの話していないかあるいは話していない不行き届きな地方があって、みんなは提出して、共同で勉強して、向上します!
このチュートリアル:Coolite Toolkit中国語ステーションが先発し、転載はハイパーリンク形式でソースを明記してください.ご協力ありがとうございます.
転載先:https://www.cnblogs.com/magical/archive/2009/10/27/1590701.html

CSSの解析原理

最も簡単なWebコントロールを作る